在jQuery中，选中/取消选中主复选框时检查/取消检查复选框。

Question

在jQuery中，选中/取消选中主复选框时检查/取消检查复选框。

4

我的列标题中有一个复选框。单击它后，所有复选框都需要被选中，在取消主复选框时，所有复选框都应该被取消选中。我搜索了很多，但我只找到了JavaScript代码。但我想要纯JQuery的东西。我在这里粘贴我的代码。现在，当主复选框被点击时，所有复选框都被选中，但主复选框本身没有被选中。有人能帮我用jQuery编写代码吗？

这是我的标题复选框：

<input type="checkbox" onclick="checkBoxChecked()" id="mastercheck" name ="mastercheck"/>

点击事件是指

function checkBoxChecked(){
         try{

        var checkboxes=document.getElementsByName("test");

        for(i=0;i<document.getElementsByName("test").length;i++)
        {
         checkboxes[i].checked = "checked";
        }

        }
        catch(e)
        {

        }

        document.getElementById("mastercheck").checked="checked";
        return true;

        }

- Sanjay Malhotra

你为什么要将复选框设置为true？难道你不想让用户取消选择吗？应该将其设置为true和false，而不是字符串“checked”。你的jQuery代码在哪里？将其分解成小部分：获取所有复选框，检查状态，设置属性。完成！ - epascarello

为什么你想用jQuery，当原生JavaScript就能胜任这项工作呢？ - Harry

2

@Harry：http://i.stack.imgur.com/TdrW7.gif - DarkBee

2

我不明白为什么有些人会给负面评价并打击别人的积极性。我知道有些问题可能只需要几秒钟就能被经验丰富的人解决，但是你们的帮助可以逐渐培养其他人。请多多考虑别人的感受。 - Ashish Jain

谢谢Ashish。我是IT领域的新手，没有接受过任何培训，所以我会问很多简单的问题。 - Sanjay Malhotra

显示剩余2条评论

8个回答

3

$(document).ready(function() {
    $("#mastercheck").click(function() {
        var checkBoxes = $("input[name=test]");
        checkBoxes.prop("checked", this.checked);
    });                 
});

- tranceporter

1

尝试

function checkBoxChecked() {
    $('input[name=test]').prop('checked', $('#mastercheck').is(':checked'))
}

- Arun P Johny

1

为什么不试一下这样的东西：

。

$('.master-checkbox').click(function(){
    var master_checkbox = $(this);
    $('input[type="checkbox"]').prop('checked', master_checkbox.prop('checked'));
});

- Thomas

1

你可以尝试像这样做：

您可以尝试如下代码：

$('#mastercheck').on('change', function() {
  if ($(this).is(':checked')) {
    // Check all
    $('.childcheck').prop('checked', true);
  }
  else {
    // Uncheck all
    $('.childcheck').prop('checked', false);
  }
});

- Elorfin

1

<b> <input type="checkbox" id="ckbCheckAll" /> Check/Uncheck me </b>
 <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

$(document).ready(function() {
      $('#ckbCheckAll').click(function(){
        var isChecked = $('#ckbCheckAll').is(':checked');
        if(isChecked)
        {
            $('.checkBoxClass').attr('checked', true);
        }

        else
        {
               $('.checkBoxClass').attr('checked', false); 
        }

      });
    });

- Thakur Rock

1

选中状态应该设置为true | false

- Deepak Ingole

1

复选框[i]被选中=true;

如果这不起作用，您应该查看这个问题：在Dashcode中以编程方式更改复选框的状态

- mitchfuku

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NaYaN · Accepted Answer

HTML：

<input type="checkbox" id="ckbCheckAll" />
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

JQuery：

$(document).ready(function () {
    $("#ckbCheckAll").click(function () {
        $(".checkBoxClass").prop('checked', $(this).prop('checked'));
    });
});

演示现场