checkbox全选与反选

最新推荐文章于 2024-06-07 22:01:55 发布
最新推荐文章于 2024-06-07 22:01:55 发布
阅读量377 收藏
点赞数
分类专栏： JS 文章标签： checkbox全选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lml_little/article/details/51134582
版权

1.只有一组checkbox的时候：


<html lang="zh-CN">

<head runat="server">
<meta charset="utf-8">
<title>阿斯达是</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function() {
           $("#checkAll").click(function() {
                $('input[name="subBox"]').attr("checked",this.checked); 
            });
            var $subBox = $("input[name='subBox']");
            $subBox.click(function(){
                $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
            });

        });


//点击子类的另一种

//点击子类
$('.checkall').parent().next().children().children().click(function(){
var checkname=$(this).attr('name');
var subBox = $("input[name="+checkname+"]");
$(this).parent().parent().prev().children().prop("checked",subBox.length == $("input[name="+checkname+"]:checked").length ? true : false);
})

    </script>
 
</head>
<body>
    <div>
        <input id="checkAll" type="checkbox">全选
        <input name="subBox" type="checkbox">阿斯达斯
        <input name="subBox" type="checkbox">阿三的发生
        <input name="subBox" type="checkbox">阿斯达
        <input name="subBox" type="checkbox">阿斯达斯
    </div>


</body>

</html>



2.多组input的时候

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>表1</title>


<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>

<div class="table-responsive">
<table id="customers" class="table text-center table-bordered tb-striped">
<thead>
<tr>
<th>大类</th>
<th>模块</th>
<th>功能点</th>
</tr>
</thead>
<tbody>
<!-- 功能一 -->
<tr>
<td class="bg-white" rowspan="4">基本功能</td>
<td><input type="checkbox" class="checkall" name="funlog"/>登录注册</td>
<td>
<label><input type="checkbox" class="sub" name="funlog" />功能1</label>
<label><input type="checkbox" class="sub" name="funlog" />功能2</label>
<label><input type="checkbox" class="sub" name="funlog" />功能3</label>
<label><input type="checkbox" class="sub" name="funlog" />功能4</label>
<label><input type="checkbox" class="sub" name="funlog" />功能5</label>
<label><input type="checkbox" class="sub" name="funlog" />功能6</label>
</td>
</tr>
<tr>
<td><input type="checkbox"  name="funuser"  class="checkall" />用户中心</td>
<td>
<label><input type="checkbox" name="funuser" />功能1</label>
<label><input type="checkbox" name="funuser" />功能2</label>
<label><input type="checkbox" name="funuser" />功能3</label>
<label><input type="checkbox" name="funuser" />功能4</label>
<label><input type="checkbox" name="funuser" />功能5</label>
<label><input type="checkbox" name="funuser" />功能6</label>
</td>
</tr>
<tr>
<td><input type="checkbox" name="funlog2" class="checkall"/>第三方登录</td>
<td>
<label><input type="checkbox" name="funlog2" />功能1</label>
<label><input type="checkbox" name="funlog2" />功能2</label>
<label><input type="checkbox" name="funlog2" />功能3</label>
<label><input type="checkbox" name="funlog2" />功能4</label>
<label><input type="checkbox" name="funlog2" />功能5</label>
<label><input type="checkbox" name="funlog2" />功能6</label>
</td>
</tr>
<tr>
<td><input type="checkbox"  name="fundis" class="checkall" />内容展示</td>
<td>
<label><input type="checkbox" name="fundis" />功能1</label>
<label><input type="checkbox" name="fundis" />功能2</label>
<label><input type="checkbox" name="fundis" />功能3</label>
<label><input type="checkbox" name="fundis" />功能4</label>
<label><input type="checkbox" name="fundis" />功能5</label>
<label><input type="checkbox" name="fundis" />功能6</label>
</td>
</tr>

</table>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
var a=0;

//checkbox全选
$('.checkall').click(function(){
if($(this).is(':checked')){
$(this).parent().next().children().each(function(){
$(this).children().prop("checked","checked");
})
a = $(this).parent().next().children().length;
}
else {
$(this).parent().next().children().each(function(){
$(this).children().removeAttr("checked");
})
a = 0;
}
})

//点击子类时，判断是否是全选
$('.sub').click(function(){
b = $(this).parent().siblings().length //
if($(this).is(':checked')){
a++;
}else{
a--;
}

if(a-1 == b){

$(this).parents('td').prev().children().prop('checked','checked')//prop()方法是当attr用的时候是起作用但是web页面没效果的时候用
}else{
$(this).parents('td').prev().children().removeAttr('checked')
}

})
</script>

</body>

</html>


attr和prop使用情况


小虫信息科技
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery 1.42 checkbox 全选和反选代码
10-29
在这个例子中，我们有一个`<label>`标签用于触发全选/反选操作，以及一个`<table>`包含多个`<tr>`行，每行有一个`<input type="checkbox" class="chk" />`用于用户选择。 总结一下，这个例子展示了如何使用jQuery ...
Android RecycleView使用（CheckBox全选、反选、单选）
01-05
本文实例为大家分享了CheckBox全选、反选、单选的具体代码，供大家参考，具体内容如下 MainActiivity package com.bwie.day06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; ...
antd-vue checkbox全选与反选
zyzhan
11-04 1310
<div> <div style="border-bottom: 1px solid #E9E9E9;margin-bottom: 4px"> <a-checkbox :indeterminate="indeterminate" name="checkAll" :checked="checkAll" @change="onCheckAllChange"> 全选 </a-checkbox.
掌握复选框（Checkbox）的奥秘：全选与反选功能实现
最新发布
星途码客的博客
06-07 926
然而，仅仅拥有复选框是不够的，我们还需要为用户提供更加便捷的操作方式，比如全选和反选功能。本文星途将带大家详细介绍复选框的注意事项、使用方法，并重点展示如何实现全选和反选功能，帮助读者提升网页的交互体验。通过掌握复选框的注意事项和使用方法，我们可以为用户提供更加友好、高效的交互体验。同时，全选和反选功能的实现进一步增强了复选框的实用性，让用户能够更加方便地批量操作选项。一种常见的做法是使用自定义的复选框样式，并通过 JavaScript 监听点击事件来模拟复选框的行为。然后，通过遍历这些复选框，并使用。
checkbox全选和反选以及取消
73
12-15 378
很多网站页面上面经常可以看到，在每一条记录的前面会有一个一个选择框，下面这个例子实现了一键完成全选，一键完成反选，一键完成取消。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
Checkbox全选与反选
tuntunw的博客
11-30 187
package com.example.allandreverse;import java.util.ArrayList; import java.util.LinkedList; import java.util.List;import android.os.Bundle; import android.app.Activity; import android.content.Context; i
jquery实现checkbox全选与反选
丽丽大神ing的博客
09-12 437
<input type="checkbox" id="All" />全选/反选<br /> <div id="div"> <input type="checkbox" class="item" />1<br /> <input type="checkbox" class="item" />2<br /&...
JS实现checkbox的全选和反选
weixin_53748496的博客
12-09 1886
【代码】JS实现checkbox的全选和反选。实现以下功能： （1）当选中表头的商品 价格前的checkbox框时，下面的每个商品都会被选中。（全选） （2）当选中所有商品时，表头的商品 价格前的checkbox框自动被选中。（反选） （3）只要有一个商品没被选中，表头的商品 价格前的checkbox框就不会被选中。
vue中el-checkbox全选、反选、多选
qq_45268602的博客
02-18 8578
实现一组数据的全选、反选、多选操作
checkbox全选和反选
月光散
04-12 327
checkbox全选和反选
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
weixin_65793170的博客
04-02 2318
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
Layui checkbox 全选/反选/取消全选（十一行代码实现）
ChauncyTan的博客
03-11 9285
话不多说，先展示效果图，如果看官觉得合适，接下来还有源码和实现详解等着您 一、效果图
checkbox 全选与反选
01-23
在“checkbox全选与反选”的场景中，我们通常会遇到行全选、列全选以及相应的联动效果。下面将详细阐述这个主题的知识点。 一、全选与反选的基本原理 全选功能是通过一个主复选框控制所有子复选框的状态，当主复选...
WPF CheckBox全选、反选比较通用
04-19
本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先，我们需要理解CheckBox的基本用法。在XAML中，我们可以创建一个CheckBox并为其设置文本和初始状态： ```xml <CheckBox Content="全选" x:Name=...
点击复制按钮进行复制文本
热门推荐
lml_little的博客
04-06 1万+
function jsCopy(){          var e=document.getElementById("contents");//对象是contents          e.select(); //选择对象 （全选）         document.execCommand("Copy"); //执行浏览器复制命令     }   
js事件on动态绑定数据，绑定多个事件
lml_little的博客
11-29 1万+
一.on('clcik')与$('').clcik()方法的区别： on('clcik')： 1.绑定多个事件，用空格隔开事件和命名空间如：“click”或“keydown.myPlugin”。或者格式为 on({ "clcik": function(){}, mouseover: function(){} }) 命名空间: namespace 名字{ 定义的数据； 定义的函数；
bootstrap模态框点击空白处模态框不消失、监听模态框打开还是关闭
lml_little的博客
08-05 1万+
1.在div上添加 aria-hidden="true"   属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。 data-show="false"   data-show当初始化时显示模态框。 2.添加js $('#myModal').modal({backdrop: 'static
仿微信支付页面
lml_little的博客
05-27 7815
jQuery微信支付代码 $(function(){ //出现浮动层 $(".ljzf_but").click(function(){ $(".ftc_wzsf").show(); }); //关闭浮动 $(".close").click(function(){ $(".ftc_wzsf").hide(); }); //数字显示隐藏 $(".xiaq_tb
Android Recyclerview+checkbox全选反选
03-14
这个问题可以回答。你可以使用一个全选的checkbox来控制所有子checkbox的选中状态，当全选checkbox被选中时，遍历所有子checkbox并将它们的选中状态...对于反选，你可以遍历所有子checkbox，将它们的选中状态取反即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值