Question

我在codeigniter中使用ajax，现在我有其他复选框，只要有人检查复选框，结果应根据用户对复选框的选择而来，那么我该怎么做？这是我的代码

<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>
        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脚本

test.php示例仅返回选定的复选框值

<?php 

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

?>

我如何使用Ajax PHP筛选复选框

1 个答案: