完整的jquery全选/取消全选示例效果

由于这两个比较简单,我就直接上代码吧:

//全选/取消全选
$('#quanxuan').toggle(function () {
    $("input[name='abc']").attr("checked", 'true');
}, function () {
    $("input[name='abc']").removeAttr("checked");
});

//反选
$('#fanxuan').click(function () {
    $("input[name='abc']").each(function () {
        if ($(this).attr("checked")) {
$(this).removeAttr("checked");
        } else {
$(this).attr("checked", 'true');
        }
    });
});
 

再总结一下:

jquery版本在1.3之前时,获取checkbox的选中项的操作:

    $("input[name='abc'][checked]").each(function () {
        alert(this.value);
    });
jquery版本在1.3之后时,获取checkbox的选中项的操作:

    $("input[name='abc']:checked").each(function () {
        alert(this.value);
    });
 

附 完整测试Demo代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.7.2.min.js"></script>

    <script>
        $(function () {
//获取选中项(FF和chrome下无效)
$('#huoqu').click(function () {

    //$("input[name='abc'][checked]").each(function () {
    //    alert(this.value);
    //});

    $('#show').html("");
    $("input[name='abc'][checked]").each(function () {
        //alert(this.value);
        $('#show').append(this.value + "  ");
    });
});

//获取选中项
$('#huoqu2').click(function () {
    $('#show').html("");
    $("input[name='abc']:checked").each(function () {
        //alert(this.value);
        $('#show').append(this.value + "  ");
    });
});

//全选/取消全选
$('#quanxuan').toggle(function () {
    $("input[name='abc']").attr("checked", 'true');
}, function () {
    $("input[name='abc']").removeAttr("checked");
});

//反选
$('#fanxuan').click(function () {
    $("input[name='abc']").each(function () {
        if ($(this).attr("checked")) {
$(this).removeAttr("checked");
        } else {
$(this).attr("checked", 'true');
        }
    });
});
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
<input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">一年级</label>
<input type="checkbox" name="abc" value="二年级" id="in2" /><label for="in2">二年级</label>
<input type="checkbox" name="abc" value="三年级" id="in3" /><label for="in3">三年级</label>
<input type="checkbox" name="abc" value="四年级" id="in4" /><label for="in4">四年级</label>
<input type="checkbox" name="abc" value="五年级" id="in5" /><label for="in5">五年级</label>
<input type="checkbox" name="abc" value="六年级" id="in6" /><label for="in6">六年级</label>
<input type="checkbox" name="abc" value="七年级" id="in7" /><label for="in7">七年级</label>
<input type="checkbox" name="abc" value="八年级" id="in8" /><label for="in8">八年级</label>
        </div>
        <br />
        <input type="button" id="huoqu" value="获取选中项(FF和chrome下无效)" />
        <input type="button" id="quanxuan" value="全选/取消全选" />
        <input type="button" id="fanxuan" value="反选" />
        <input type="button" id="huoqu2" value="获取选中项" />
       <br />
        选中项: <div id="show">

        </div>
    </form>
</body>
</html>

时间: 2024-09-11 04:29:22

完整的jquery全选/取消全选示例效果的相关文章

jQuery实现复选框全选/取消全选/反选及获得选择的值

  这篇文章主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(docu

JQUERY CHECKBOX全选,取消全选,反选方法三_jquery

jquery.checkboxes.zip,然后解压引用到使用插件的页面,这个不用多说了吧!下面看具体例子,为了让大家更好的理解,我直接把实现功能的代码贴出来: 复制代码 代码如下: $("#myform").toggleCheckboxes()//全选,取消全选,反选 $("#myform").toggleCheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform"

CHECKBOX全选,取消全选,反选 jquery代码

方法一  $("#myform").togglecheckboxes()//全选,取消全选,反选 $("#myform").togglecheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform").togglecheckboxes(".top5", true)//全选,取消全选且只选前五个,反选 $("#myform").c

jquery 实现checkbox全选/取消全选

jQuery.attr  获取/设置对象的属性值,如:  代码如下 复制代码 $("input[name='chk_list']").attr("checked");     //读取所有name为'chk_list'对象的状态(是否选中) $("input[name='chk_list']").attr("checked",true);      //设置所有name为'chk_list'对象的checked为true 再如

checkbox全选/取消全选以及checkbox遍历jQuery实现代码_jquery

复制代码 代码如下: <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list" id="chk_list_1" valu

html中的javascript 全选/取消全选操作示例代码

全选/取消全选在批量操作数据时经常会使用到,下文有个不错的示例使用js完成全选/取消全选操作,感兴趣的朋友可以参考下     复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="tex

jQuery实现复选框全选/取消全选/反选及获得选择的值_jquery

复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全选/取消全部 $(&qu

DataGrid 的 全选/取消全选 控制(CheckBox)

datagrid|控制 DataGrid控件: <Columns>        <asp:TemplateColumn>         <HeaderStyle Width="10px"></HeaderStyle>         <HeaderTemplate>          <INPUT id="CheckAll" name="CheckAll" type="

jquery checkbox全选、取消全选实现代码_jquery

复制代码 代码如下: <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox&q