JS 循环选择 选择第一个和最后一个,中间连续被选.中间被选择的,不能点击,只能从已经选择的第一位和最后一位去点击.
例:
有一个循环出来的复选框30个.我选中了复选框的第10位.然后再任意选择从第11位开始的复选框中的第20位,从第10位开始到20位的复选自动被选上,如果我想点击中间被选择的复选框.是弹出报错.只能选择第10位或第20位.才能重新选择.
请大家帮帮忙,
这条题比较难,
例:
有一个循环出来的复选框30个.我选中了复选框的第10位.然后再任意选择从第11位开始的复选框中的第20位,从第10位开始到20位的复选自动被选上,如果我想点击中间被选择的复选框.是弹出报错.只能选择第10位或第20位.才能重新选择.
请大家帮帮忙,
这条题比较难,
解决方案 »
- js 或者JQUERY 让一行英文标题字数超出的话超出部分变成....
- jquery 如何对多个对象绑定同一个事件。
- js点击连接指定css样式
- 如何用js输出杨辉三角的前1０行
- javascript跨域访问xml问题?
- 我都急了三天了!
- 如何判断 img 元素是否加载成功？？？
- 在退回桌面时，如何使window.showdialogmodal的窗口总是得到焦点？
- 请问；怎么在调用函数时使用字符窜组合变量？？？
- 我想在TD单击时弹出一个位于td下边宽度与td相同的Div，这要怎么做？
- JSP+Tomcat 6.0的web发布时，出现错误日志，tomcat自动停止，网页白页
- Div展开效果，代码不多，希望大大们帮忙看看问题在哪？
<input type="checkbox" id="2"/>
<input type="checkbox" id="3"/>
<input type="checkbox" id="4"/>
<input type="checkbox" id="5"/>
<input type="checkbox" id="6"/>
<input type="checkbox" id="7"/>
<input type="checkbox" id="8"/>
<input type="checkbox" id="9"/>
<input type="checkbox" id="10"/>
<input type="checkbox" id="11"/>
<input type="checkbox" id="12"/>
<input type="checkbox" id="13"/>
<input type="checkbox" id="14"/>
<input type="checkbox" id="15"/>
<input type="checkbox" id="16"/>
<input type="checkbox" id="17"/>
<input type="checkbox" id="18"/>
<input type="checkbox" id="19"/>
<input type="checkbox" id="20"/>
<input type="checkbox" id="21"/>
<script type="text/javascript">
var inputList = document.getElementsByTagName("input");
for(var i=0,len=inputList.length;i < len;i++){
if(inputList[i].type == "checkbox"){
inputList[i].onclick = function(){
alert(this.id);
}
}
}
</script>
记录两次点击的id 如你选择的是id10和id18
循环将这其间的复选框的checked值置true
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<input type="checkbox" onclick="selectCkb(this)" id="1" />
<input type="checkbox" onclick="selectCkb(this)" id="2"/>
<input type="checkbox" onclick="selectCkb(this)" id="3"/>
<input type="checkbox" onclick="selectCkb(this)" id="4"/>
<input type="checkbox" onclick="selectCkb(this)" id="5"/>
<input type="checkbox" onclick="selectCkb(this)" id="6"/>
<input type="checkbox" onclick="selectCkb(this)" id="7"/>
<input type="checkbox" onclick="selectCkb(this)" id="8"/>
<input type="checkbox" onclick="selectCkb(this)" id="9"/>
<input type="checkbox" onclick="selectCkb(this)" id="10"/>
<input type="checkbox" onclick="selectCkb(this)" id="11"/>
<input type="checkbox" onclick="selectCkb(this)" id="12"/>
<input type="checkbox" onclick="selectCkb(this)" id="13"/>
<input type="checkbox" onclick="selectCkb(this)" id="14"/>
<input type="checkbox" onclick="selectCkb(this)" id="15"/>
<input type="checkbox" onclick="selectCkb(this)" id="16"/>
<input type="checkbox" onclick="selectCkb(this)" id="17"/>
<input type="checkbox" onclick="selectCkb(this)" id="18"/>
<input type="checkbox" onclick="selectCkb(this)" id="19"/>
<input type="checkbox" onclick="selectCkb(this)" id="20"/>
<input type="checkbox" onclick="selectCkb(this)" id="21"/><script type="text/javascript"> function selectCkb(ob){
if(!isBegain(ob.id)){
var bId = getFirst(ob.id);
for(var i = bId; i< bId + 10;i++){
document.getElementById(i).checked = 'checked';
}
}
} function isBegain(s){
return /\S*1$/.test(s);
}
function getFirst(s){
var id = s.substring(0,s.length -1) + "1";
return parseInt(id);
}
</script> </BODY>
</HTML>
选择了任意的一个开始位置,再选择任意的一个结束位置,从开始到结束的中间是自动被选择上的,如果想再选择其它的,只能取消开始位置和结束位置,才能重新选择复选框.
document.getElementById(i).checked = ob.checked;
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <form name="formDate" method="post" action="" id="formDate">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd1' ><input name='selectid' type='checkbox' id='selectid1' value='1' onclick="test(this)" /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd2' ><input name='selectid' type='checkbox' id='selectid2' value='2' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd3' ><input name='selectid' type='checkbox' id='selectid3' value='3' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd4' ><input name='selectid' type='checkbox' id='selectid4' value='4' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd5' ><input name='selectid' type='checkbox' id='selectid5' value='5' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd6' ><input name='selectid' type='checkbox' id='selectid6' value='6' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd7' ><input name='selectid' type='checkbox' id='selectid7' value='7' onclick="test(this)"/>
<br /></td>
</table></td>
</tr>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd8' ><input name='selectid' type='checkbox' id='selectid8' value='8' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd9' ><input name='selectid' type='checkbox' id='selectid9' value='9' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd10' ><input name='selectid' type='checkbox' id='selectid10' value='10' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd11' ><input name='selectid' type='checkbox' id='selectid11' value='11' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd12' ><input name='selectid' type='checkbox' id='selectid12' value='12' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd13' ><input name='selectid' type='checkbox' id='selectid13' value='13' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd14' ><input name='selectid' type='checkbox' id='selectid14' value='14' onclick="test(this)"/></td>
</table></td>
</tr>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd15' ><input name='selectid' type='checkbox' id='selectid15' value='15' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd16' ><input name='selectid' type='checkbox' id='selectid16' value='16' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd17' ><input name='selectid' type='checkbox' id='selectid17' value='17' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd18' ><input name='selectid' type='checkbox' id='selectid18' value='18' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd19' ><input name='selectid' type='checkbox' id='selectid19' value='19' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd20' ><input name='selectid' type='checkbox' id='selectid20' value='20' onclick="test(this)"/></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd21' ><input name='selectid' type='checkbox' id='selectid21' value='21' onclick="test(this)"/>
<br /></td>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td></form>
</tr>
</table></td>
</tr>
</table>
</body>
</html><script language="javascript" type="text/javascript">
var firstCheck = false;
var secondCheck = false;
var startIndex = 0;
var endIndex = 0;
function test(o){
if(firstCheck)
{
secondCheck = true;
endIndex = parseInt(o.id.replace("selectid",""));
}
else
{
firstCheck = true;
startIndex = parseInt(o.id.replace("selectid",""));
}
if(firstCheck && secondCheck)
{
if(startIndex < endIndex)
{
for(var i = startIndex; i < endIndex;i++)
{
document.getElementById("selectid" + i).checked = true;
}
}
else
{
for(var i = endIndex; i < startIndex;i++)
{
document.getElementById("selectid" + i).checked = true;
}
}
firstCheck = false;
secondCheck = false;
}
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkboxSelected.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function () {
var show = document.getElementById("show");
var template = "";
for (var i = 1; i < 31; i++) {
template += "<input type='checkbox' name='box' value='" + i + "' onclick='check(this.value)' /><br/>"
}
show.innerHTML = template;
};
function check(v) {
var boxs = document.getElementsByName("box");
var temp = [];
for (var i = 0; i < boxs.length; i++) {
if (boxs[i].checked) {
temp.push(parseInt(boxs[i].value));
}
}
if (temp.length >= 2) {
var start = temp[0];
var end = temp[temp.length - 1];
//alert(start + "-"+ end);
for (var j = start; j < end; j++) {
if (!boxs[j - 1].checked) {
boxs[j-1].checked = true;
}
if (v == boxs[j-1].value) {
alert("你只能选择第一个或最后一个选中项");
boxs[j-1].checked = false;
retrun;
}
}
}
}
</script> </head>
<body>
<div id="show">
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkboxSelected.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function test(c) {
var boxs = document.getElementsByName("selectid");
var temp = [];
for (var i = 0; i < boxs.length; i++) {
if (boxs[i].checked) {
temp.push(parseInt(boxs[i].value));
}
}
if (temp.length >= 2) {
var start = temp[0];
var end = temp[temp.length - 1];
//alert(start + "-"+ end);
for (var j = start; j < end; j++) {
if (!boxs[j - 1].checked) {
boxs[j-1].checked = true;
}
if (c.value == boxs[j-1].value) {
alert("你只能选择第一个或最后一个选中项");
retrun;
}
}
}
}
</script> </head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <form name="formDate" method="post" action="" id="formDate">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd1' ><input name='selectid' type='checkbox' id='selectid1' value='1' onclick="test(this)" /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd2' ><input name='selectid' type='checkbox' id='selectid2' value='2' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd3' ><input name='selectid' type='checkbox' id='selectid3' value='3' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd4' ><input name='selectid' type='checkbox' id='selectid4' value='4' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd5' ><input name='selectid' type='checkbox' id='selectid5' value='5' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd6' ><input name='selectid' type='checkbox' id='selectid6' value='6' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd7' ><input name='selectid' type='checkbox' id='selectid7' value='7' onclick="test(this)"/>
<br /></td>
</table></td>
</tr>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd8' ><input name='selectid' type='checkbox' id='selectid8' value='8' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd9' ><input name='selectid' type='checkbox' id='selectid9' value='9' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd10' ><input name='selectid' type='checkbox' id='selectid10' value='10' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd11' ><input name='selectid' type='checkbox' id='selectid11' value='11' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd12' ><input name='selectid' type='checkbox' id='selectid12' value='12' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd13' ><input name='selectid' type='checkbox' id='selectid13' value='13' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd14' ><input name='selectid' type='checkbox' id='selectid14' value='14' onclick="test(this)"/></td>
</table></td>
</tr>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd15' ><input name='selectid' type='checkbox' id='selectid15' value='15' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd16' ><input name='selectid' type='checkbox' id='selectid16' value='16' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd17' ><input name='selectid' type='checkbox' id='selectid17' value='17' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd18' ><input name='selectid' type='checkbox' id='selectid18' value='18' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd19' ><input name='selectid' type='checkbox' id='selectid19' value='19' onclick="test(this)"/>
<br /></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd20' ><input name='selectid' type='checkbox' id='selectid20' value='20' onclick="test(this)"/></td>
</table></td>
<td height="30" align="center" valign="middle" class="Bots" ><table border='0' width='100%' cellpadding='0' cellspacing='0'>
<td id='tdd21' ><input name='selectid' type='checkbox' id='selectid21' value='21' onclick="test(this)"/>
<br /></td>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td></form>
</tr>
</table></td>
</tr>
</table>
</body>
</html>