读书人

共有四个复选框当有两个选中在点击

发布时间: 2012-03-16 16:34:56 作者: rapoo

共有四个复选框,当有两个选中,在点击第三个时,提示只能选两个。怎么实现?
如题

[解决办法]
<head>
<title> Untitled Page </title>
<script type= "text/javascript ">
function cktest(ckvalue)
{
p=0;
var ck=document.getElementsByName( "test ");
for(i=0;i <ck.length;i++)
{
if(ck[i].checked) p++;
}
if(p> =3)
{
alert( "!!! ");
ck[ckvalue-1].checked=false;
}
}
</script>
</head>
<body>
<form>
<input type= "checkbox " id= "test " value= "1 " onclick= "cktest(this.value) " />
<input type= "checkbox " id= "test " value= "2 " onclick= "cktest(this.value) " />
<input type= "checkbox " id= "test " value= "3 " onclick= "cktest(this.value) " />
<input type= "checkbox " id= "test " value= "4 " onclick= "cktest(this.value) " />
</form>
</body>
</html>


不好意思~

我实在想不出怎么取消特定的选择...所以就用了value
应该少通用性了...
[解决办法]
<script language= "javascript ">
function chkbox(elm)
{var obj=document.getElementsByName( "cbox ");
var num=0;
for (i=0;i <obj.length ;i++ )
if (obj[i].checked )
num+=1;
if (num> 2)
{alert( "最多可以选择两个! ");
elm.status=false;
}
}
</script>

<input type= "checkbox " name= "cbox " value=1 onclick= "chkbox(this); ">
<input type= "checkbox " name= "cbox " value=2 onclick= "chkbox(this); ">
<input type= "checkbox " name= "cbox " value=3 onclick= "chkbox(this); ">
<input type= "checkbox " name= "cbox " value=4 onclick= "chkbox(this); ">
[解决办法]
<script language= "javascript ">
function chkbox(elm)
{var obj=document.getElementsByName( "cbox ");
var num=0;
for (var i=0;i <obj.length ;i++ )
if (obj[i].checked )
num+=1;
if (num> 2)
{alert( "最多可以选择两个! ");
elm.status=false;
}
}
</script>

<input type= "checkbox " name= "cbox " value=1 onclick= "chkbox(this); ">
<input type= "checkbox " name= "cbox " value=2 onclick= "chkbox(this); ">
<input type= "checkbox " name= "cbox " value=3 onclick= "chkbox(this); ">
<input type= "checkbox " name= "cbox " value=4 onclick= "chkbox(this); ">

[解决办法]
<script language= "JavaScript " type= "text/javascript ">
var ichk=0;
function chksel(chk,sel){
if(ichk==2){
if(chk.checked){
alert( "最多只能选中两个! ");
chk.checked=false;
return null;
}
}
ichk+=(chk.checked?1:-1);
document.getElementById(sel).style.visibility=(chk.checked? "visible ": "hidden ");


}
</script>

<input name= "ch1 " type= "checkbox " id= "ch1 " onclick= "chksel(this, 'sel1 '); " value= "value1 " />
<select name= "sel1 " id= "sel1 " style= "visibility:hidden; ">
</select>
<input name= "ch2 " type= "checkbox " id= "ch2 " onclick= "chksel(this, 'sel2 '); " value= "value2 " />
<select name= "sel2 " id= "sel2 " style= "visibility:hidden; ">
</select>
<input name= "ch3 " type= "checkbox " id= "ch3 " onclick= "chksel(this, 'sel3 '); " value= "value3 " />
<select name= "sel3 " id= "sel3 " style= "visibility:hidden; ">
</select>
<input name= "ch4 " type= "checkbox " id= "ch4 " onclick= "chksel(this, 'sel4 '); " value= "value4 " />
<select name= "sel4 " id= "sel4 " style= "visibility:hidden; ">
</select>
在ie6, ff2测试ok
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> shawl.qiu template </title>
<script type= "text/javascript ">
// <![CDATA[
onload=function()
{
var oEle=document.getElementsByName( "cbx ");
for(var i=0, j=oEle.length; i <j; i++)
{
oEle[i].onclick=function()
{
fCkCkd(this, 2);
}
}
}

function fCkCkd(oCbx, iLimit)
{
var iCkd=0;
var oEle=document.getElementsByName(oCbx.name);
for(var i=0, j=oEle.length; i <j; i++)
{
if(oEle[i].checked)iCkd++;
if(iCkd> iLimit)
{
oCbx.checked=false;
alert( "复选框同时只能选中两个. ");
return false;
}
}
} // shawl.qiu script
//]]>
</script>
</head>
<body>
<li/> <input type= "checkbox " name= "cbx ">
<li/> <input type= "checkbox " name= "cbx ">
<li/> <input type= "checkbox " name= "cbx ">
<li/> <input type= "checkbox " name= "cbx ">
</body>
</html>

读书人网 >JavaScript

热点推荐