控制checkbox被选数量，未选的变灰色
控制checkbox被选数量，未选的变灰色
何处锦绣不灰堆
发布于 2020-05-29 11:50:09
发布于 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 删除
评论
登录后参与评论
推荐阅读