控制checkbox被选数量，未选的变灰色

何处锦绣不灰堆

发布于 2020-05-29 11:50:09

1.4K0

发布于 2020-05-29 11:50:09

文章被收录于专栏：农历七月廿一

checkbox是html里面的一种复选框，操作这个东西的时候说实话是很麻烦的，因为是靠我们判断他的状态是不是被选中来操作的，今天要说的怎么将一部分checkbox选中以后，没有被选的变灰色，按照我们自己的要求来操作复选框，例子：

我们要求选中三个以后就不让用户再选择了：

我们今天就做这个。

首先我们画出几个复选框：

<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>vue</label> 
<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>boostrap</label>
<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C</label>
<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C++</label> 
<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C#</label>
<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>PHP</label>

通过DOM获取到复选框的元素：

var obj=document.getElementsByTagName("input")

最后我们写控制数量的函数：

function check() { 
			var sun=0; 
				for(var i=0;i<obj.length;i++) { 
					if(obj[i].type=="checkbox" && obj[i].checked) {
						sun++; 
						if( sun< 3 ) 
						{ 
							for(var j=0;j<obj.length;j++) 
							obj[j].disabled = false;
						} 
					}
					else if(sun == 3 ) { 
						for(var j=0;j<obj.length;j++) { 
							if ( !obj[j].checked ) 
							obj[j].disabled = true; 
						} 
						event.srcElement.checked=true; 
						layer.msg("最多选择3个！");
						break; 
					} 
					else if(sun > 3 ) 
					{ 
						event.srcElement.checked=false; 
						break; 
					} 
				} 
		}

这样就基本完成了，如果没看明白的可以下方留言。

效果展示：

这里用到的css：

			input{
			    display: inline-block;
			    vertical-align: middle;
			    margin: 0;
			    padding: 0;
			    width: 20px;
			    height: 20px;
			    background: url(../css/polaris/polaris.png) no-repeat;
			    border: none;
			    cursor: pointer;
			}
			label{
				font-family:"agency fb";
				font-size: larger;
			}

引用到的js和css：

                <link href="../css/layui/css/layui.css" rel="stylesheet"/>
		<link href="../css/polaris/polaris.css" rel="stylesheet" />
		<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="../css/layui/lay/dest/layui.all.js" type="text/javascript"></script>
		<script src="../js/icheck.js"></script>

这里的icheck.js是一个美化checkbox的插件，后期我会简单的介绍一下这个插件具体怎么用。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/03/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html