在jquery中选中master复选框时选中/取消选中复选框 [英] Check/Uncheck checkboxes on select of a master checkbox in jquery

查看:201
本文介绍了在jquery中选中master复选框时选中/取消选中复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的列标题中有checkboc。点击它,所有复选框需要检查和取消选中主复选框所有应该取消选中。我google了很多,但我只有javascript代码这种事情。但我想纯jQuery的东西。我在这里粘贴我的代码。现在onclick的主复选框,所有的复选框都检查,但主复选框本身可以有人帮助我的jquery代码。

I have a checkboc in my column header. Onclick of it, all the checkboxes needs to be checked and on uncheck of master checkbox all should be unchecked. I googled a lot but I got only javascript code for this kind of thing. But I want pure JQuery thing.I am pasting my code here. Now onclick of master checkbox, all the checkboxes are checking but master checkbox itself Can somebody help me with jquery code.

这是我的头复选框:

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

Onclick方法是

Onclick method is

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;

        }


推荐答案

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

这篇关于在jquery中选中master复选框时选中/取消选中复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆