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

<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
应该少通用性了...

解决方案 »

  1.   

    <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);">
      

  2.   

    iamXiaMi() :谢谢。
    可是我有特定的value值。不能是1，2，3，4。
      

  3.   

    <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);">
      

  4.   

    <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=<%=val1%> onclick="chkbox(this);">
    <input type="checkbox" name="cbox" value=<%=val2%> onclick="chkbox(this);">
    <input type="checkbox" name="cbox" value=<%=val3%> onclick="chkbox(this);">
    <input type="checkbox" name="cbox" value=<%=val4%> onclick="chkbox(this);">
      

  5.   

    这些复选框每个后面还有一个select下拉框，选中时还要控制下拉框显示，取消选中时则不显示后面的下拉框。
    当有两个选中，再点击第三个时提示“只能选中两个”。
      

  6.   

    查了DOM和DHTM手册..连JS手册都差了...elm貌似没找到?解释下啦...THX
      

  7.   

    elm只不过是函数chkbox(elm)的传入参数。
      

  8.   

    <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
      

  9.   

    <!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>