php - Jquery：选中或取消选中复选框时无法显示加载相应的页面

Question

我有一个复选框。我想根据复选框checked和uncheck状态调用两个不同的 php 页面。

但下面的代码只是调用检查的 php 页面。可能是什么原因？

     <script type="text/javascript">
     $(function()
     {
     $('input[id^="test"]').on('click',function()
       {
         if ($('input[id^="test"]').checked)//when users click to on checkbox to check
         {

           $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=1",
               success: function(data){ 
                alert('Successfully updated...');
               }
             });
     } 
     else//when users uncheck the checkbox
       {    $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=2",
               success: function(data){
                 alert("uncheckde...");
               }
             });
        } 
        });
    });
         </script>

并在页面

<?php //checkbox in a while loop

            echo " <input type='checkbox' id='test' value='".$row['id']."'/> ";
         ?>

Answer 1

这是您的检查是否已检查不起作用。请改用该.is(':checked')方法。

$(document).ready(function() {
    $('input[name=cbx]').change(function() {
        if ($(this).is(':checked')) {
            alert('Checked');
        } else {
            alert('Not Checked');
        }
    });
});

Answer 2

按照要求：

尝试$('input[id^="test"]').is(':checked')用作条件。您还可以使用$(this)来引用触发事件的特定复选框。所以，这是你的代码清理了一下：

<script>
    $(function() {
        $('input[id^="test"]').on('click',function(e) {
            if ($(this).is(':checked') {
                $.ajax({
                    url: "updatestatus.php?id="+$(this).val()+"&status=1",
                    success: function(data){ 
                        alert('Successfully updated...');
                    }
                });
            } 
            else {    
                $.ajax({
                    url: "updatestatus.php?id="+$(this).val()+"&status=2",
                    success: function(data){
                        alert("uncheckde...");
                    }
                });
            } 
        });
    });
</script>

我要做的另一项更改是将一个类分配给您的复选框，并以它为目标，而不是使用“开头为”选择器（因为并非每个浏览器都支持它）。

Answer 3

像这样试试

$(function()
     {
     $('input[id^="test"]').on('click',function()
       {
         if ($(this).attr("checked") == "checked")//when users click to on checkbox to check
         {

           $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=1",
               success: function(data){ 
                alert('Successfully updated...');
               }
             });
     } 
     else//when users uncheck the checkbox
       {    $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=2",
               success: function(data){
                 alert("uncheckde...");
               }
             });
        } 
        });
    });