checkbox的全选,取消全选,获得选中值

<html>
<head>
<title>jq全选以及获得选中项的值</title>
<meta charset="utf-8">

<script src="http://libs.baidu.com/jquery/1.4.1/jquery.js"></script>
<script>
$(function() {
    $("#select").click(function() {
        if ($(this).attr("checked")) {
            $("input[name=items]").each(function() {
                $(this).attr("checked", true);
            });
        } else {
            $("input[name=items]").each(function() {
                $(this).attr("checked", false);
            });
        }
    });
    //得到选中的值,ajax操作使用
    $("#submit").click(function() {
        var text="";
        $("input[name=items]").each(function() {
            if ($(this).attr("checked")) {
                text += ","+$(this).val();
            }
        });
         alert(text);
    });
});
</script>
</head>
<body>
<form action="#" method="post">
    <input type="checkbox" value="1" name="items"><br/>
    <input type="checkbox" value="2" name="items"><br/>
    <input type="checkbox" value="3" name="items"> <br/>
    <input type="checkbox" value="4" name="items"> <br/>
    <input type="checkbox" value="5" name="items"> <br/>
    <input type="checkbox" value="6" name="items"> <br/>
    <input type="checkbox" value="7" name="items"> <br/>
    <input type="checkbox" value="8" name="items"> <br/>
    <input type="checkbox" value="9" name="items"> <br/>
    <input type="checkbox" value="10" name="items"> <br/>
    <input type="checkbox" value="11" name="items"> <br/>
	<input type="checkbox" id="select"/> 全选<br/>
    <input type="submit" id="submit" value="提交">
</form>
</body>
</html>

  好像高版本的jq库会有问题,待研究。。。。。

时间: 2024-10-15 16:33:18

checkbox的全选,取消全选,获得选中值的相关文章

html checkbox 实现全选/取消全选

html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th> <th>Savings</th> </tr

checkbox全选/取消全选

//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $("input[name='cbxCommodity']").prop("checked","checked"); }else{ $("input[name='cbxCommodity']").removeAttr("check

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

全选/取消全选那点事

今天我花了半天时间处理checkbox全选/取消全选那点事 技术领域 可信计算 其他   全选 申请日 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016  年  至 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 至今 年 专利类型 发明专利 实用新型   全选 授权

jquery全选/取消全选(反选)/单选操作

使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body>    <div>        <input id="checkAll" type="checkbox" />全选        <input name="subBox" type="checkbox" />

jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn])   --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn])     --> 当元素失去焦点时,触发 blur 事件 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></ti

AngularJS--购物车全选/取消全选功能实现

刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

jquery checkbox勾选/取消勾选的诡异问题

<form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" v

jquery checkbox勾选取消勾选的诡异问题

jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />        <input type="checkbox" name="items" value="足球"

jquery全选,取消全选

最近项目又用到了这个全选和取消全选的操作. 以前总是自己写纯JS.现在既然知道怎么写了.那如何用JQ写得更简洁呢.这样也能学到新的东西.如果乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码如下: [javascript] view plaincopy <script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"></script&g