带有 jQ​​uery 的复选框

Question

这里是 jsfiddle http://jsfiddle.net/6mk7m/9/

我在 stackoverflow 上发现我需要创建 jsfiddle 帐户，这样我就可以向你们展示代码以便于阅读，（抱歉）如果我的英语不太好，

我目前正在学习jQuery，我不是专家，只是一个“初学者”，无论如何，

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

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

我想要的是，当我点击这个带有这个特定 id = all 的复选框时，我想选中下面列出的这 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 的复选框时

( 它不检查任何复选框 ) 但是，当我检查控制台时，我看到所有属性都等于已选中 - 但我没有看到它们在浏览器上选中的复选框我的意思是它们在中间没有这个 tick 标记的复选框每个盒子， 可能代码有问题，我就是想不通为什么当我想点击超过 3 次时它不起作用。

Answer 1

$(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"                       
            });         
        }
    });
});

Answer 2

这是一个具有正确行为的 jsFiddle。在 jQuery 的最新版本中，命令 prop() 应该用于更改元素的属性（而不是属性）。

http://jsfiddle.net/6mk7m/10/

请看下面的代码：

    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);
    }

Answer 3

$('#all').on('click', function(){
    $('input:checkbox[name="us[]"]').prop('checked', this.checked);
});

Answer 4

试试这个方法-

Working Fiddle

$("input[id='all']").bind('click',function(){
        var all = $(this);
        console.log('status: ' + all.prop('checked'));
        if(all.is(':checked')){
            //alert('now its true');
            $("input:checkbox[name^='us']").prop("checked",true);
        }
        else{
            $("input:checkbox[name^='us']").prop("checked",false);
        }
});

Answer 5

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

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

看到这个fiddle