在 jquery 中选择主复选框时选中/取消选中复选框答案

【问题标题】：Check/Uncheck checkboxes on select of a master checkbox in jquery在 jquery 中选择主复选框时选中/取消选中复选框
【发布时间】：2013-09-29 09:18:42
【问题描述】：

我的列标题中有一个 checkboc。单击它，所有复选框都需要被选中，并且在取消选中主复选框时，所有复选框都应该被取消选中。我用谷歌搜索了很多，但我只有这种事情的 javascript 代码。但我想要纯 JQuery 的东西。我在这里粘贴我的代码。现在点击主复选框，所有复选框都在检查，但主复选框本身可以帮助我使用jquery代码。

这是我的标题复选框：

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

onclick方法是

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;

        }

【问题讨论】：

你到底为什么要把复选框设置为真？您是否希望他们无法取消选择它？将其设置为 true 和 false，而不是检查字符串。您对 jQuery 的尝试在哪里？把它分成小部分。获取所有复选框，检查状态，设置属性。多田。
当原生 JavaScript 完成这项工作时，为什么要在 jQuery 中使用它？
@Harry : i.stack.imgur.com/TdrW7.gif
我不明白为什么人们会投反对票并劝阻人们。我知道可能会有一些琐碎的问题，这可能需要有经验的人几秒钟的时间，但逐渐你的帮助可能会培养其他人。请体谅。
谢谢阿什。我是 IT 领域的新手，我在没有任何培训的情况下工作。所以我提出了很多简单的问题。

标签： javascript jquery html checkbox

【解决方案1】：

试试

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

【讨论】：

【解决方案2】：

checked 属性应该设置为true | false

【讨论】：

【解决方案3】：

复选框[i].checked = true;

如果这不起作用，你应该看看这个问题：Changing a checkbox's state programmatically in dashcode

【讨论】：

【解决方案4】：

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

Live Demo

【讨论】：

你想要什么？在此处描述或提供一些现场演示，例如 jsfiddle
Onclick of Master Check box 我希望所有的复选框都被选中。并且在取消选中所有内容时都应该取消选中。我的疑问是我应该在我的 onclick 方法中写 $(document) 吗？
no..它不需要在侧点击事件中再次编写 $(document) 函数....查看我的代码
请看我已经为我的主复选框设置了 onclclick 属性。在那个方法里面，我应该写什么？我的意思是我应该从哪里复制你的代码？？
但您不需要进行该 checkBoxChecked() 事件。 Jquery 代码会自动运行。

【解决方案5】：

你为什么不试试这样的东西：

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

【讨论】：

【解决方案6】：

你可以试试这样的：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

      });
    });

【讨论】：