如何使用ajax php过滤复选框

Question

I am using ajax in codeigniter, I have different checkbox now i want whenever someone checked checkboxes,result should come according to user selection of checkboxes,so how can i do this ? here is my code

<input type="checkbox" class="styled" id="Baker" value="Bakers">
<label for="role1">Bakers</label>

<input type="checkbox" class="styled" id="Bakerd" value="Bakersd">
<label for="role1">Bakersd</label>

<script>
    $('.styled').click(function() {
    alert($(this).attr('id'));  
       if(this.checked){
            $.ajax({
                type: "POST",
                url: 'searchOnType.php',
                data: $(this).attr('id'), 
                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });
</script>   

Answer 1

Html

<ul class="unstyled centered">
    <li>
        <input type="checkbox" class="styled-checkbox" id="Baker" value="" onchange="checkBoxOnChange(this);">
      <label for="role1">Baker</label>
    </li>
    <li>
      <input type="checkbox" class="styled-checkbox" id="Barista" value="" onchange="checkBoxOnChange(this);">
      <label for="role2">Barista</label>
    </li>
    <li>
      <input type="checkbox" class="styled-checkbox" id="Bartender" value="" onchange="checkBoxOnChange(this);">
      <label for="role3">Bartender</label>

    </li>
    <li id="filter">

    </li>
  </ul>

jQuery Script

<script>
        function checkBoxOnChange(isChecked){
            if($(isChecked).is(":checked")){
                console.log("check");
                $.ajax({
                url: 'test.php',
                type: 'POST',
                data: {id: $(isChecked).attr('id')}, // I suggest you to use $(isChecked).val(). Add value in html same as id
                success: function(data){
                    console.log(data);
                    $("#filter").text(data);
                }
                }
              );
            }else{
                console.log("Uncheck");
            }
        }
        </script>

Php Script

test.php example just return a selected checkbox value

<?php 

echo ($_REQUEST['id']);
exit;

?>