带有jQuery的复选框

这是JSFIDLE

我在stackoverflow上发现，我需要创建JSFIDLE帐户，这样我就可以向你们展示代码，以便于阅读，对不起，如果我的英语不是很好

我现在正在学习jQuery，我不是专家，只是个初学者

我做了一个复选框，我给了它一个id=all

<input type="checkbox" id="all" /><span style='color:red'>All</span>

简单地说，我想要的是，当我点击这个带有这个特定id的复选框时，我想选中下面列出的3个复选框

<input type="checkbox" name="us[]" value="google" />Google
<input type="checkbox" name="us[]" value="youtube" />Youtube
<input type="checkbox" name="us[]" value="friend" />Friend<br/><br/>

这就是我是怎么想出来的代码

<script type="text/javascript">

$("document").ready(function() {


    $("input[id='all']").bind('click',function(){

        var all = $(this);

        console.log('status: ' + all.prop('checked'));


        if(all.prop('checked') == true)
        {
            //alert('now its true');
            $("input:checkbox").attr("checked","checked");
        }
        else if (all.prop('checked') == false){
            $("input:checkbox").removeAttr("checked");
        }

    })
})  
 </script>

当我点击id=all的复选框时，它会选中所有复选框

现在，当我第二次单击id=all的复选框时，它将取消选中所有复选框

直到现在一切都很顺利

现在，当我第三次点击id=all的复选框时，问题就来了

它不勾选任何复选框 但是，当我检查控制台时，我看到所有的属性都与选中的一样，但是在浏览器上我没有看到它们的复选框，我的意思是复选框在每个框的中间没有这个标记。 也许代码有问题，我只是不明白为什么当我想点击3次以上时它就不工作了。

试试这种方法-

这样试试-

---

下面是一个具有正确行为的JSFIDLE。对于jQuery的最新版本，应该使用命令prop来改变元素的属性，而不是属性

请参阅下面的代码：

    if(all.prop('checked') == true)
    {
        //alert('now its true');
        $("input:checkbox").prop("checked",true);
    }
    else if (all.prop('checked') == false){
        $("input:checkbox").prop("checked",false);
    }

---

下面是一个具有正确行为的JSFIDLE。对于jQuery的最新版本，应该使用命令prop来改变元素的属性，而不是属性

请参阅下面的代码：

    if(all.prop('checked') == true)
    {
        //alert('now its true');
        $("input:checkbox").prop("checked",true);
    }
    else if (all.prop('checked') == false){
        $("input:checkbox").prop("checked",false);
    }

---

为什么不让它变得超级简单：

$('#all').on("change",function(){
    $('input:checkbox').not('#all').each(function(a,b){
           var _checked=$('#all').is(":checked");
          $(b).prop('checked',_checked)
        });
});

---

见此

为什么不让它变得超级简单：

$('#all').on("change",function(){
    $('input:checkbox').not('#all').each(function(a,b){
           var _checked=$('#all').is(":checked");
          $(b).prop('checked',_checked)
        });
});

---

---

请参见此

不要使用属性，请使用道具。要进行检查，请调用$'input:checkbox'.prop'checked'，true；，要取消选中，请将true更改为falseCorrected您的JSFIDLE；你忘了在外部资源中包含jQuery。谢谢Anton，我会尝试一下…@user2237771，我更正了我的评论。对不起，第一次我错了。安东，我只是做了同样的事，不要使用属性，使用道具。要进行检查，请调用$'input:checkbox'.prop'checked'，true；，要取消选中，请将true更改为falseCorrected您的JSFIDLE；你忘了在外部资源中包含jQuery。谢谢Anton，我会尝试一下…@user2237771，我更正了我的评论。抱歉，但我第一次错了。安东，我刚这么做了，同样的事情，是的，我看到了穆罕默德，但在我的firefox浏览器上它不工作，但控制台显示属性有checkedthanks mohammed的值供你帮助，但在你解决它之前还有其他人，所以我必须标记他的答案，正确的一个，我真的很感谢你的帮助，再次感谢你…..是的，我看到了mohammed，但在我的firefox浏览器上它不工作，但控制台显示属性具有CheckedTanks mohammed的值，请你帮助，但在你解决问题之前还有其他人，所以我必须标记他的答案，正确的答案，我真的很感谢你的帮助，再次感谢你……谢谢你的帮助，但我只想知道为什么attr方法不起作用。。。？直到我使用.prop方法而不是给出自己的解释；如果你好奇的话，考虑一下这个问题并回答一个阅读，谢谢你的帮助，但是我只想知道为什么Att方法不起作用……直到我使用.prop方法而不是给出自己的解释；如果你好奇地欢迎，请考虑这个问题并回答一个阅读！如果你能给你的代码添加一些解释，特别是其中使用的关键内容，以及它们如何帮助解决问题，那就太好了。欢迎来到SO！如果您对代码添加一些解释，尤其是其中使用的关键内容以及它们如何帮助解决问题，那就太好了。

$(document).ready(function() {
    $('#selecctall').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });         
        }
    });
});