Question

我已经在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

复选框时出现问题

（不检查任何复选框）然而，当我检查控制台时，我看到所有属性都等于检查 - 但是我在浏览器上看不到它们的复选框我的意思是复选框它们没有这个勾选标记在中间每个盒子，也许代码有问题，我只是无法弄清楚为什么当我想点击超过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

使用jQuery复选框

5 个答案: