用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了

首先准备jsp页面控件:

  请选择您的爱好:<br>
  <input type="checkbox" id="all" name="selectAll"value="全选"/>全选<br>
  <input type="checkbox"  name="hobby"value="足球"/>足球
    <input type="checkbox"  name="hobby"value="蓝球"/>篮球
    <input type="checkbox"  name="hobby"value="乒乓球"/>乒乓球
    <input type="checkbox"  name="hobby"value="羽毛球"/>羽毛球<br/>
  <input type="button" id="checkAll" value="全选">
  <input type="button" id="reverse" value="反选">
  <input type="button" id="disAll" value="全不选">

效果:

用jquery实现以上功能,其中复选框可以全选/全不选,任意一项取消,复选框也会取消,直接上代码

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            /* 全选按钮 */
            $("#checkAll").click(function(){
                $("input[name=‘hobby‘]").each(function(){
                    $(this).attr(‘checked‘,‘checked‘);
                });
            });
            /* 全不选 */
            $("#disAll").click(function(){
                $("input[name=‘hobby‘]").each(function(){
                    $(this).attr(‘checked‘,false);
                });

            });
            /* 反选 */
            $("#reverse").click(function(){
                $("input[name=‘hobby‘]").each(function(){
                    $(this).attr(‘checked‘,!$(this).attr("checked"))
                });
            });
            /* 全选 (复选框的全选)/全不选*/
            $("#all").click(function(){
                $("[name=hobby]:checkbox").each(function() {
                this.checked=$("#all")[0].checked;
                });
                });

            /* 全选(复选框),单个不选后状态设为false */
            $("[name=‘hobby‘]").each(function () {
                $(this).click(function () {
                if ($("[name=‘hobby‘]:checked").length == $("[name=‘hobby‘]").length) {
                $("#all").attr("checked", "checked");
                }
                else $("#all").removeAttr("checked");
                });
                });
        });
    </script>

值得一提的是复选框的全选全不选,采用js对象和jquery对象相互转化的思想,使得运算最简化。

时间: 2024-12-19 05:06:09

用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了的相关文章

CheckedListBoxControl 实现复选框的单选与多选功能

由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的复选框组合控件应该按照下面方法也可以实现该功能,可以试下(⊙o⊙)哦 代码来啦O(∩_∩)O哈哈~ 1 //首先触发SelectedIndexChanged事件,然后再触发ItemCheck事件 2 3 //存储选中的复选框的值 4 string strGXY=string.Empty; 5 pri

ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选

ExtJs实现复选框Checkboxgroup单勾选及跨控件全选 由于项目的需要,我们要将EXT的控件Checkboxgroup复选框组改造成但勾选,并且实现一个复选框组控制其他多个复选框组的全选,以下是关于如何实现的代码片段. 1.创建CheckboxGroup对象 1,新建空的EOS6.5的工程,新建com.towngas.tcis. gridlock构件包: 2,在com.towngas.tcis.gridlock构件包的"展现"节点下的"页面资源"节点中创建

Jquery默认选中单选框radio第一个、选中指定值的单选框

概述 当页面加载时,指定区域的单选框默认选中第一个:用户勾选单选框之后,再次回到页面时,需要选中上次勾选的单选框 JS 选中指定id为"admin-content-task"中的某个radio // 页面隐藏域的值 var platIdVal = $("#platIdVal").val(); // 如果platIdVal为空,说明没有勾选单选框 if(platIdVal==null || platIdVal == ''){ // 默认选中平台单选框的第一个 $(&q

Mutiselect下拉复选框(保存和设置默认选中项)

HTML代码 <asp:DropDownList ID="ddlWarehouseIds" runat="server" CssClass="ddl"></asp:DropDownList> <input type="hidden" name="<%#Eval("WarehouseNames")%>" id="hid_<%#Eva

firefox(火狐)下 js中设置checkbox属性checked=&quot;checked&quot;已有,但复选框却不显示勾选的原因

刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery 1.6开始,attr()方法返回undefined尚未设置的属性,对于设置checked这种类型的属性使用prop()来设置. jquey官网给出的两个方法的说明: 获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性. 并指出检索和修改DOM属性,如checked,selecte

复选框选择全部或只选单个

//html网页代码 <tr> <td> <input type="checkbox" name="vehicle_qx" id="vehicle_qx" value="0" onclick="vehicle_qx(0)"/><font>全部</font> <input type="checkbox" name="

vue element UI el-table 给表格添加复选框,并得到所选值

<el-table @selection-change="changeCheckBoxValue" v-bind:data="this.requireData" v-loading="this.tableLoading" border style="width:100%" > <el-table-column min-width='140' type="selection"><

史上最全设计模式导学目录(完整版)

转自:http://blog.csdn.net/lovelion/article/details/17517213 在看本文前,特别要感谢原作者的分享,还只来得及看了下作者的文档目录(貌似作者好久没更新了呀),想要修内功的同学值得一看!好了,我要去啃书了 基础知识 设计模式概述 从招式与内功谈起--设计模式概述(一):设计模式从何而来? 从招式与内功谈起--设计模式概述(二):设计模式是什么? 从招式与内功谈起--设计模式概述(三):设计模式有什么用?附:个人观点 面向对象设计原则 面向对象设计

最全设计模式导学目录(完整版)

圣诞献礼! 2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多篇与设计模式学习相关的文章,涵盖了七个面向对象设计原则和24个设计模式(23个GoF设计模式 +  简单工厂模式),为了方便大家学习,现将所有文章的链接进行了整理,希望能给各位带来帮助! 祝大家圣诞节快乐! 花絮:本文的工作量大大超过之前的估计,几乎整个平安夜都花在它身上了, 基础知识 设计模式概述 从招式与内功谈起——设计模式概述(一):设计模式从何而来? 从招式与内功谈起——设计模式概述(二):设计模式是什么