1

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

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

我目前正在学习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 次时，我无法弄清楚为什么它不起作用。

4

5 回答 5

3 
$(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"                       
            });         
        }
    });
});
于 2014-09-04T10:18:53.390 回答
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);
    }
于 2013-04-20T12:50:52.820 回答
2 
$('#all').on('click', function(){
    $('input:checkbox[name="us[]"]').prop('checked', this.checked);
});
于 2013-04-20T12:57:38.767 回答
0

试试这个方法——

工作小提琴

$("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);
        }
});
于 2013-04-20T12:48:19.483 回答
0

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

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

看到这个小提琴

于 2013-04-20T12:55:21.817 回答