js控制checkbox
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js控制checkbox相关的知识，希望对你有一定的参考价值。
<%for i=1 to 5%>
<tr>
<input type="checkbox" name="m" id="check<%=ii%>"
<input type="text" id="selectpage<%=ii%>" name="name<%=ii%>
</tr>
<%next%>
循环了5个checkbox，要实现在文本框值不为空的时候对应前面的check自动选中
window.onload=function()
var x=document.getElementsByTagName(\'input\');
setInterval(function()
if(x[5].value!=\'\')
for(var i=0;i<x.length-1;i++)
x[i].checked=true;
,100)
</script>追问
不是页面加载执行，开始全是默认没选中的，当input获取焦点要输入内容，check就自动选中
参考技术A贴代码就是个坑..。
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
var inpts = $("input[type='text']");
var inpcs = $("input[type='checkbox']");
for(var i=0;i<inpts.length;i++)
inpts[i].index = i ;
$("input[id='selectpage"+i+"']").on("keyup",function()
this.value = this.value.replace(/^\\s*/g,"");
if(this.value==""||this.value==null)
inpcs[this.index].checked=false;
else
inpcs[this.index].checked=true;
)
);
</script>
</head>
<body>
<br>
<input type="checkbox" name="m" id="check0"/>
<input type="text" id="selectpage0" name="name0"/>
<br>
<input type="checkbox" name="m" id="check1"/>
<input type="text" id="selectpage1" name="name1"/>
<br>
<input type="checkbox" name="m" id="check2"/>
<input type="text" id="selectpage2" name="name2"/>
<br>
<input type="checkbox" name="m" id="check3"/>
<input type="text" id="selectpage3" name="name3"/>
<br>
<input type="checkbox" name="m" id="check4"/>
<input type="text" id="selectpage4" name="name4"/>
<br>
</body>
</html>
JS对checkbox全选和取消全选
需求：checkbox控制列表数据全选与取消全选择。
效果图：
1、html
<body > <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/> <input type="file" id="File1" name="File1" style="display:none;"> <input type="button" name="outbtn" value="导出"/> <table border="1"> <!-- <tr> <a href="javascript:;" class="a-upload"> </a> </tr>--> <tr> <td><input id="all" type="checkbox" name="yon" onclick="chk()"/></td> <td>ID</td> <td>地区</td> </tr> <c:forEach items="${dislist }" var="dis"> <tr> <td><input id="mychk" type="checkbox" name="mychk"/></td> <td>${dis.id }</td> <td>${dis.name }</td> </tr> </c:forEach> </table> </body>
2、js
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> /* $("#all").click(function(){ alert("11111111"); if(this.checked){ alert("2222"); $("mychk").prop("checked",true); }else{ $("mychk").prop("checked",false); } }); */ function chk(){ var all = document.getElementById("all"); var mychk = document.getElementsByName("mychk"); alert("mychk长度=="+mychk.length); if(all.checked==true){ alert("all.checked==true全选"); if(mychk.length){ for(var i=0;i<mychk.length;i++){ mychk[i].checked = true; } } mychk.chcked=true; }else{ alert("all.checked==false全不选"); if(mychk.length){ for(var i=0;i<mychk.length;i++){ mychk[i].checked = false; } } } } </script>
以上是关于js控制checkbox的主要内容，如果未能解决你的问题，请参考以下文章