js全选、全不选功能

最新推荐文章于 2023-04-15 15:13:09 发布
最新推荐文章于 2023-04-15 15:13:09 发布
阅读量236 收藏
点赞数
分类专栏： 日常总结--javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42566295/article/details/83148285
版权

实现功能：

1. 全选

2. 全不选

3. 每条数据被勾选后，全选框变成被勾选状态

4. 勾选全选框，取消某条数据的勾选，全选框变成未勾选状态

直接看demo：

（label标签和类名ui-checkbox、ui-checkbox-inline是在checkbox.css中对复选框做了美化）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<link rel="stylesheet" href="checkbox.css">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style> 
*{padding:0;margin:0;}
</style>
<body>
<div class="outbox" style="margin-bottom: 60px;">
	<!-- 复选 & 单选 -->
	<div class="ui-checkbox ui-checkbox-inline">
        <input type="checkbox" class="checkbox all_select" 
               id="check_alls" onclick="marked(this)">
        <label for="check_alls">全选</label>
	</div>
	<div class="ui-checkbox ui-checkbox-inline">
        <input type="checkbox" class="checkbox other_select"
               id="check_other" onclick="marked(this)">
        <label for="check_other">反选</label>
	</div>
	<div>
		<div class="ui-checkbox ui-checkbox-inline">
            <input type="checkbox" class="check_item" 
                   id="first_item" value="first_item" onclick="marked(this)">
	        <label for="first_item">1</label>
		</div>
		<div class="ui-checkbox ui-checkbox-inline">
            <input type="checkbox" class="check_item" 
                   id="second_item" value="second_item" onclick="marked(this)">
	        <label for="second_item">2</label>
		</div>
		<div class="ui-checkbox ui-checkbox-inline">
            <input type="checkbox" class="check_item" 
                   id="third_item" value="third_item" onclick="marked(this)">
	        <label for="third_item">3</label>
		</div>
		<div class="ui-checkbox ui-checkbox-inline">
            <input type="checkbox" class="check_item" 
                   id="forth_item" value="forth_item" onclick="marked(this)">
	        <label for="forth_item">4</label>
		</div>
	</div>
</div>
</body>
<script>
    function marked(obj){
    	// 点击全选的复选框
    	if(obj.id == 'check_alls'){
    		// 如果全选按钮是选中状态
    		if(jQuery('#check_alls').is(':checked')){
    			jQuery('.check_item').prop('checked',true);
    		}else{
    			jQuery('.check_item').prop('checked',false);
    		}
    	}

    	// 点击反选的复选框
    	if(obj.id == 'check_other'){
    		if(jQuery('#check_other').is(':checked')){
    			jQuery('.check_item').each(function(index,val){
					if(jQuery(this).is(":checked")){
		    			jQuery(this).prop('checked',false);
		    		}else{
		    			jQuery(this).prop('checked',true);
		    		}
	    		})
	    		//如果全选中 将全选按钮改成选中状态
	    		var checkedlen = jQuery("input.check_item:checked").length;
    	        var inputlen = jQuery('.check_item').length;
	    		if(checkedlen == inputlen){
                    jQuery("#check_alls").prop('checked',true);  
                }else{
                    jQuery("#check_alls").prop('checked',false);  
                }
    		}
    	}

    	// 点击每一条数据的复选框
    	if(obj.className == 'check_item'){
            if(jQuery(obj).is(":checked")){
            	var checkedlen = jQuery("input.check_item:checked").length;
    	        var inputlen = jQuery('.check_item').length;
            	if(checkedlen == inputlen){
                    jQuery("#check_alls").prop('checked',true);  
                }else{
                    jQuery("#check_alls").prop('checked',false);  
                }
            }else{
                jQuery("#check_alls").prop('checked',false); 
            }
    	}
    }  
</script>
</html>

然后就是这个样子：

以上。

 

checkbox.css的代码：

input[type="checkbox" i] {
    -webkit-appearance: checkbox;
    box-sizing: border-box;
}
input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}
input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
.ui-radio, .ui-checkbox {
    position: relative;
    display: block;
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ui-selection{
  padding-right:20px;
}
  
.ui-selection-inline{
  float:left;
} 
.ui-radio-inline,.ui-checkbox-inline{
    display:inline-block;
    margin-right:30px;
    margin-top:0;
    margin-bottom:0;
}   
.ui-radio input[type="radio"] ,.ui-checkbox input[type="checkbox"] {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    margin-left:4px;
}
.ui-radio label ,.ui-checkbox label{
    display: inline-block;
    position: relative;
    padding-left: 5px;
    font-size:12px;
    line-height:14px;
}
/*生成一个伪元素，作为美化版的单选按钮，先给伪元素添加一些样式*/
.ui-radio label::before{
    content: "";
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    left: 0;
    margin-top: -1px;
    margin-left: -21px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}   
.ui-radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 8px;
    height: 8px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #448aff;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
} 
/*给单选按钮的勾选状态添加不同的样式*/
.ui-radio input[type="radio"]:checked + label::after {
     -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
} 
.ui-checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 14px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}   
.ui-checkbox input[type="checkbox"]:checked + label::before {
    background-color: #448aff;
    border-color: #448aff;
}
.ui-checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    left: -1px;
    top: 0px;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 12px;
    color: #fff;

}  
.ui-checkbox input[type="checkbox"]:checked + label::after {
     /*对勾*/
    content: '\00a0';
    display: inline-block;
    border: 3px solid #fff;
    border-right-width: 0;
    border-top-width: 0;
    width: 5px;
    height: 3px;
    -webkit-transform: rotate(-50deg);
    position: absolute;
    top: 3px;
    left: 3px;
}

a{
    text-decoration: none;
    color:#448aff;
}
.switchbutton{
  display: inline-block  ;
  position: relative;
  font-size: 12px;
  width: 42px;
  height: 20px ;
  line-height: 42px;
  }
.switchbutton input   
   { display: none }
  
.switchbutton input:checked + i:before {  
    border-color: #448aff ;
    -webkit-box-shadow: #448aff 0 0 0 16px inset  ;
    box-shadow: #448aff 0 0 0 16px inset  ;
    background-color: #448aff  ;
    transition: background-color 0.3s  ;
    -webkit-transition: background-color 0.3s;}
  
.switchbutton input:checked + i:after { 
    left: 22px }
      
.switchbutton i   {
    width: 42px ;
    height: 20px ;
    position: absolute  ;
    z-index: 2  ;
    border: 0  ;
    background: none  ;
    outline: 0;}
  
.switchbutton i:before  { 
    content: ''  ;
    width: 42px  ;
    height: 20px  ;
    background-color: #ccc  ;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-radius: 10px;
    cursor: pointer  ;
    display: inline-block  ;
    position: relative  ;
    vertical-align: top  ;
    -webkit-box-sizing: content-box  ;
    box-sizing: content-box  ;
    -webkit-box-shadow: #dfdfdf 0 0 0 0 inset ;
    box-shadow: #dfdfdf 0 0 0 0 inset ;
    -webkit-transition: border 0.3s, background-color 0.3s  ;
    transition: border 0.3s, background-color0.3s ;
    -webkit-background-clip: content-box  ;
    background-clip: content-box ;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
  }
  
.switchbutton i:after  {
      content: ''  ;
      width: 16px;
      height: 16px  ;
      position: absolute;
      top: 2px;
      left: 2px ;
      border-radius: 100% ;
      background-color: #fff ;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) ;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)  ;
      -webkit-transition: left .2s  ;
      transition: left .2s ;
  }

label {
  display: block;
  line-height: 1;
  /*margin-bottom:10px;*/
}
label input {
  margin-top: 10px;
  margin-right: 20px
}
.switch-t{
  display:block;
  margin-bottom:5px}

 

qq_42566295
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现全选全不选
04-20
NULL 博文链接：https://sylqy.iteye.com/blog/1894273
js 全选
qq_49438920的博客
06-06 1036
checkbox全选实现，Array.from、every、forEach的应用
JavaScript实现全选和全不选
09-09 183
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function selectAll(num){ //获取下面的四个复选框 var res = document.getE...
js 全选 全不选
xiaojunhu的专栏
04-14 935
 本文介绍的是用JS实现全选全不选的方法，另外，这个代码不是我写的，我只是从公司的项目里提取出来，并总结在此，以便以后复用，呵呵。function chkClick (chk , oSrc)...{    if(chk.checked)        chkAll (oSrc) ;    else        unChkAll (oSrc)}function chkAll (oSrc).
JS实现全选全不选功能
最新发布
qq_64037242的博客
04-15 641
1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中。
JS实现CheckBox复选框全选全不选功能
01-21
CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭。大多数应用程序的“设置”... CheckBox复选框JS实现全选全不选功能,很简单，就只需插入一小段js函数就行了。。。 <script language=javascri
js实现全选和全不选功能
10-15
总结来说，JavaScript实现全选和全不选功能的关键在于监听全选复选框和待选复选框的点击事件，以及正确地更新和同步`checked`属性。通过这种方式，我们可以提供给用户方便快捷的批量操作选项，提升用户体验。
Js实现复选框的全选、全不选反选功能代码实例
10-15
2. **全不选**：全不选功能是将所有复选框的状态设置为未选中。同样，遍历所有复选框并将其`checked`属性设置为`false`即可。在代码中，`obt2`按钮的点击事件监听器实现了这个功能： ```javascript obt2.onclick = ...
JS实现的全选、全不选及反选功能【案例】
10-17
全不选功能与全选类似，但它的作用是取消所有已选中的选项。案例中，`unCheckAll`按钮用于实现这一功能。同样，我们获取该按钮并为其绑定`onclick`事件。事件处理函数中，遍历所有复选框并将`checked`属性设为`false...
JS实现全选、不选、反选
weixin_30535167的博客
12-12 67
思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。 HTML代码 1 全选：...
JS实现全选反选全不选
06-18
JS实现全选反选全不选
用js实现全选全不选功能
忆晨的博客
06-15 481
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js全选</title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("all"); btn.onclick = func
js全选功能
aghedoc1749的博客
11-24 70
functionCheckAll(){for(vari=0;i<document.form1.commentid.length;i++){if(document.form1.commentid[i].checked==false)...
js实现全选与全不选
问天下头颅几许? 看老夫手段如何！
12-30 634
js: function checkAll(name) { var el = document.getElementsByTagName('input');      var len = el.length;      for(var i=0; i if((el[i].type=="checkbox") && (el[i].name==name)){              el[i
JS实现全选与全不选
Those who achieve great thing do not stick to trifles
01-25 7265
JS实现全选与全不选 一、步骤分析 1、使用<input type="checkbox" >进行复选框的布局。 2、对全选框进行事件绑定。(鼠标单击) 3、编写全选函数。 4、获取复选框的状态，使其他复选框与全选框的状态一致。 二、代码练习 <!DOCTYPE html> <html> <head> <meta charse...
js 实现全选 全不选 反选
qq_39594456的博客
04-01 270
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
js一个简单的全选功能
a-懒人的专栏
03-25 936
function selectAll(){             var checklist = document.getElementsByName ("selected");             if(document.getElementById_x("controlAll").checked)             {                 for(var i=0
js实现全选功能
热门推荐
zhaojianyin
08-23 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js全选练习</title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("all"); btn
jQuery简易实现复选框全选全不选功能实例
在本文档中，我们将深入探讨如何使用jQuery实现checkbox的全选全不选功能。jQuery是一个流行的JavaScript库，常用于简化前端开发，特别是与DOM（文档对象模型）交互。在实际开发中，当用户需要批量操作多个复选框时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值