cari

Rumah >hujung hadapan web >tutorial js >javascript技实现多选框功能

javascript技实现多选框功能

陈政宽～
陈政宽～asal
2017-06-28 12:52:081396semak imbas

这篇文章主要介绍了用原生JS实现简单的多选框功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="cheakAll" type="checkbox">全选
<p>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</p>
</body>
</html>
<script>
//找到全选按钮
var oChkAllBtn=document.getElementById(&#39;cheakAll&#39;);
var op=document.getElementsByTagName(&#39;p&#39;)[0];
var aInput=op.getElementsByTagName(&#39;input&#39;);
var n=0; //计数器
//alert(aInput.length);
//点击全选按钮，让其他的全部选中
oChkAllBtn.onclick=function(){
//判断我是什么状态
/*if(this.checked==true){
for(var i=0; i<aInput.length; i++){
aInput[i].checked=true;
}
}else{
for(var i=0; i<aInput.length; i++){
aInput[i].checked=false;
}
}*/
for(var i=0; i<aInput.length; i++){
if(this.checked==true){//判断全选按钮自己的状态
aInput[i].checked=true;
n=aInput.length; //控制计数器
}else{
aInput[i].checked=false;
n=0; //控制计数器
}
};
};
//--------------------------------------------
//每一个按钮绑定事件
for(var j=0; j<aInput.length; j++){
aInput[j].onclick=function(){
//如果我自己是cheaked状态 n++ 否则 n--
if(this.checked==true){
n++;
}else{
n--;
};
//console.log(n);
//如果n==aInput.length
if(n==aInput.length){
oChkAllBtn.checked=true;
}else{
oChkAllBtn.checked=false;
}
};
};
</script>

以上所述是小编给大家介绍的用原生JS实现简单的多选框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

Atas ialah kandungan terperinci javascript技实现多选框功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript身份证信息验证正则表达式Artikel seterusnya：javascript实现banner图的常用功能

Artikel berkaitan

Lihat lagi