多选框的全选案例checkbox

最新推荐文章于 2022-08-17 08:30:45 发布
最新推荐文章于 2022-08-17 08:30:45 发布
阅读量1.4k 收藏
点赞数
分类专栏： html 文章标签： 全选 checkbox 复选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40680190/article/details/80332647
版权

先引入jquery，下面是html代码

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
            <input id="test1"type="checkbox"  >全选
	<input type="checkbox" id="test2"   name="tpState"  value="249">249-工人已接受
	<input type="checkbox" id="test3"   name="tpState"  value="240">240-工人已接受
	<input type="checkbox" id="test4"   name="tpState"  value="248">248-工人已接受
<script src="js/jquery-1.8.2.min.js"></script>
<script>
$("#test2").on("click",function(){
	if($("#test2").is(':checked')==true&&$("#test3").is(':checked')==true&&$("#test4").is(':checked')==true){
		$("#test1").attr("checked",true);
	}else{
		$("#test1").attr("checked",false);
	}
	
})
$("#test3").on("click",function(){
	if($("#test2").is(':checked')==true&&$("#test3").is(':checked')==true&&$("#test4").is(':checked')==true){
		$("#test1").attr("checked",true);
	}else{
		$("#test1").attr("checked",false);
	}
	
})
$("#test4").on("click",function(){
	if($("#test2").is(':checked')==true&&$("#test3").is(':checked')==true&&$("#test4").is(':checked')==true){
		$("#test1").attr("checked",true);
	}else{
		$("#test1").attr("checked",false);
	}
  
})
$("#test1").on("click",function(){
	if($("#test1").is(':checked')==true){
		$("#test2").attr("checked",true);
		$("#test3").attr("checked",true);
		$("#test4").attr("checked",true);
	}else{
		$("#test2").attr("checked",false);
		$("#test3").attr("checked",false);
		$("#test4").attr("checked",false);
	}
})
	
</script>
</body>
</html>

 

查看复选框的属性（选中没）

window.onload=function (ev) {
    $('input[type=checkbox]').change(function () {
        if($('#projectPenaltyMoeny').val()==""||$('#projectPenaltyDesc').val()==""){
            if($("#flayProject").prop("checked") == true){
                $('#projectPenaltyMoeny').removeAttr('readonly')
                $('#projectPenaltyDesc').removeAttr('readonly')
            }else{
                $("#projectPenaltyMoeny").attr("readonly", "readonly");
                $("#projectPenaltyDesc").attr("readonly", "readonly");
            }
        }
        if($('#groupPenaltyMoney').val()==""||$("#groupPenaltyDesc").val()==""){
            if($("#flayGroup").prop("checked") == true){
                $('#groupPenaltyMoney').removeAttr('readonly')
                $('#groupPenaltyDesc').removeAttr('readonly')
            }else {
                $("#groupPenaltyMoney").attr("readonly", "readonly");
                $("#groupPenaltyDesc").attr("readonly", "readonly");
            }
        }

    });
}

 

小贺学习笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解iview的checkbox多选框全选时校验问题
10-16
主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用Bootstrap实现表格复选框checkbox全选
08-31
Bootstrap相信应该不用多...这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
checkbox的全选实现
qq_41333410的博客
01-21 4982
1. 逻辑梳理 多选按钮点击事件：如果元素被选中，循环子项，设为选中；否则，循环子项，设为不选。 子项按钮点击事件：定义是否存在未选择子项flag，默认false。循环子项，如果未选择，修改flag为true。循环结束，如果flag=true，全选按钮不选，否则选中。 2. 页面实现 JS部分 //全选按钮点击事件 function allCheck(allBoxName,itemBoxName) { if($("input[name="+allBoxName+...
安卓编程：复选框(CheckBox)的简单使用方法案例
KOTLP1的博客
12-24 2万+
CheckBox和Button一样，是一种古老的控件，它的优点在于，不用用户去填写具体的信息，只需轻轻点击。 CheckBox的应用范围也很广泛，比如常见的爱好选择。 简单的CheckBox的应用案例： 1.调用setOnCheckedChangeListener()方法，并把CompoundButton.OnCheckedChangeListener实例作为参数传入
复选框——Checkbox的实例使用
博樽
05-31 766
import java.awt.*; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; public class Ex_Checkbox extends Frame{ Checkbox c1,c2,c3,c4; Panel p,panel; Label label; public Ex_Checkbox(String title) { super(title); c1= new Checkbox(
ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
wall
04-30 133
N久没有写extjs的，作为一个新手，我为我的这种懒惰行为感到惭愧！ 鉴于有朋友反应前面的文章过于简单，我决定以后的文章如果没有闪光点就放在新手区(如果不适合，请跟帖)，不放在首页！ 11.checkbox简单示例 效果图： js代码： Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new E...
关于checkbox的全选和反选实例
weixin_30530339的博客
08-25 96
<script type="text/javascript"> $(function () { $("#checkAll").click(function () {//点击全选 var allLength = $(":checkbox[id!='checkAll']").length; //复选框的个数 ...
Axure RP 复选框全选、反选
11-26
用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
jquery复选框CHECKBOX全选、反选
01-19
使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...
复选框全选与全不选操作实现思路
09-05
通过js简单实现下复选框全选与全不选，很常用的一个操作，具体实现思路及代码如下，有需求的朋友可以参考下，希望对大家有所帮助
html中的简单实例演示（checkbox）的使用
热门推荐
yangxin_blog的专栏
10-15 3万+
演示一个小小的例子：在购物车里面，我们能够勾选自己所选的商品，然后能够显示出相应的价格。 1，首先显示出相应的界面： 相关代码： 商品列表： 笔记本电脑3000   台式机 2900   路由器 90 家常用品500   洗衣机 5600 全选 注意：在checkbox中，要是属于同一组的，在复选框的属性内name="
一个简单的checkbox全选的例子
LEAF
11-24 1206
 最近在做一个PHP的项目，开始的时候真是一点都不懂，做过后，才觉得自己对html还真是不熟悉啊，今天学了个东西，也许是很基础的吧，不过原来我不知道，一直都是做.Net。 一个checkbox全选的例子 //点全选，选中当前父节点下所有子节点function checkCLASS(o)//o是父checkbox的name值{      var str
checkbox实现全选的多种方法
weixin_45659847的博客
08-13 1081
<script language=javascript> //第一种方法 function selectall1() { var a = document.getElementsByTagName("input"); if(a[0].checked==true){ for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked = false; }
如何实现全选checkbox效果
weixin_30865427的博客
09-18 426
效果图： 简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。 这一点很容易实现。 但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。 这一点会有问题，笔者遇到的就是可以取消【...
【Vue-Vant】Checkbox复选框--案例分析
weixin_45785873的博客
01-22 1万+
多选和全选是复选框中的基本组成部分，复选框用于在选中和非选中状态之间进行切换。在很日常场景中都是很常见的，这里是个小案例，记录平时复选框的运用
通过点击CheckBox实现背景变换小案例
H-rosy的博客
08-02 1020
本案例通过点击checkbox实现选择效果，点击了第一下表示选中了这个id叫modeCheckBox的多选框，此时显示黑夜，内容为月亮标记，再点一下表示取消选择，恢复为默认的太阳。今天给大家介绍一个例子，例子是实现背景的切换的，这里通过使用input标签中的checkbox中的checked实现，我觉得还是一个不错的例子，分享给大家。+介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。在为类选择器选择的时候，使用原始的。......
JavaScript关于多选框的小案例＜input type=“checkBox“ name=“items“ value=“语文“＞
weixin_43228946的博客
08-17 249
JavaScript关于多选框的小案例
checkbox小案例
小白小白从不日别的博客
07-14 172
<div class="checkbox"> <input type="checkbox" id="handsome"/> <label for="handsome">我很帅</label> </div> .checkbox{ } .checkbox input{ display: none; } .c..
vue 实现多组合复选框案例
weixin_41421227的博客
03-16 4205
完成效果如图： 当我们点击标题全选时 指定店铺所有商品都被选中，取消时全取消 当我们选择某店铺商品数量等于该店铺所有商品时，该店铺全选按钮被选中 废话不多说，代码呈上 欢迎给出更好的方案实现该功能 ---------------------------------------------------- goods_select.vue ----------------...
jquery实现多选框全选
最新发布
11-21
以下是使用jQuery实现多选框全选的代码： ```javascript // 给全选按钮绑定点击事件 $("#checkAll").click(function(){ // 获取全选按钮的状态 var status = $(this).prop("checked"); // 将所有的多选框的状态设置为与全选按钮相同 $("input[type='checkbox']").prop("checked", status); }); // 给每个多选框绑定点击事件 $("input[type='checkbox']").click(function(){ // 获取所有多选框的数量 var total = $("input[type='checkbox']").length; // 获取已选中的多选框的数量 var checkedNum = $("input[type='checkbox']:checked").length; // 如果已选中的多选框的数量等于所有多选框的数量，则将全选按钮的状态设置为选中，否则设置为未选中 if(checkedNum == total){ $("#checkAll").prop("checked", true); }else{ $("#checkAll").prop("checked", false); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值