部分全选checkbox按钮的进一步讨论！

试试这个<SCRIPT LANGUAGE="JavaScript">
<!--
function mychk(obj,isParent){
if (isParent){
var chklst = document.all(obj.name+"[]");
for (var i=0;i<chklst.length;i++){
chklst[i].click();
}
}
}
//-->
</SCRIPT>
<INPUT TYPE="checkbox" NAME="aa" onclick="mychk(this,true);"><BR>
&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[]" onclick="mychk(this,false);"><BR>
&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[]" onclick="mychk(this,false);"><BR>
&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[]" onclick="mychk(this,true);"><BR>
&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[][]" onclick="mychk(this,false);"><BR>
&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[][]" onclick="mychk(this,false);"><BR>
&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[][]" onclick="mychk(this,false);"><BR>
&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE="checkbox" NAME="aa[][]" onclick="mychk(this,false);"><BR>

解决方案 »

  1.   

    有点缺陷,修改一下function mychk(obj,isParent){
    if (isParent){
    var chklst = document.all(obj.name+"[]");
    for (var i=0;i<chklst.length;i++){
    if (obj.checked != chklst[i].checked)
    chklst[i].click();
    }
    }
    }
      

  2.   

    因为你的checkbox有上千个，所以要速度快一定要避免扫描整个文档。可以用htc来控制，对你的checkbox根据value或者name分组
    现在我有点忙，先说思路，等下给你代码
      

  3.   

    你的checkbox是有层次的，不知在界面显示上有什么体现，比如放在table的单元格里，如果在层次上能体现出来，就很好办，因为单击一个checkbox时，它的子介点都是已知的所以能否给出你的页面结构？
      

  4.   

    <!----form.htm--->
    <!--如果你要这个层次的checkbox默认都选择，就设置check=true(看form3),以后要控制这个层次的checkbox的选择情况，只要改变check就可以，如：form1.check=false--><html>
    <head>
    <meta name="Author" content="Go_Rush([email protected])">
    <STYLE TYPE="text/css">form{behavior:url('form.htc')}</STYLE>
    </head>
    <body>
    <button onClick="form1.check=((form1.check)?false:true)">一组全选</button>
    <button onClick="form2.check=((form2.check)?false:true)">二组全选</button>
    <form id=form1>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </form>
    <form id=form2>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </form>
    <form id=form3 check=true> 
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </form>
    </body>
    </html>
    <!----form.htc-----><PUBLIC:COMPONENT>
    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="element.init()" />
    <PUBLIC:METHOD NAME="init" />
    <PUBLIC:PROPERTY NAME="check" />
    <SCRIPT>
    function init(){
      element.style.margin="0px";
      element.attachEvent("onpropertychange",doSelect);
      doSelect();
    }function doSelect(){
      for(var i=0;i<element.elements.length;i++){
             //如果需要，你可以在这里检测 tagName和type,确保你操作的是一个checkbox
    element.elements[i].checked=(check)?true:false;
      } 
    }
    </SCRIPT>
    </PUBLIC:COMPONENT>
      

  5.   

    这样，用了htc就只扫描一部分了(只扫描<form>...</form>中间的)
    我没有测试过上千个checkbox时候的速度，但理论上应该是很快的，
      

  6.   

    看我的，只要区域性搜索就行了啊！
    <html>
    <head>
    <title></title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="JnKc">
    <meta name="Keywords" content="">
    <script language="JavaScript">
    <!--
    function chk(id){
    var oEvent = document.all(id);
    var chks = oEvent.getElementsByTagName("INPUT");
    oEvent.jnkc = !oEvent.jnkc;
    if (oEvent.jnkc){
    for (i=0;i<chks.length;i++){
    chks[i].checked=true;
    }
    } else{
    for (i=0;i<chks.length;i++){
    chks[i].checked=false;
    }
    }
    }
    var inputs = '';
    for (i=0;i<100;i++){
    inputs+='<input type=checkbox name=jnkc'+i+'> ';
    }
    //-->
    </script>
    </head>
    <body>
    <form method=post action="" id="chk0">
    <button onClick="chk('chk0')">所有全选</button>
    <hr>
    <button onClick="chk('chk1')">一组全选</button>
    <table id="chk1" border=1>
    <tr>
    <td id="chk11">
    <button onClick="chk('chk11')">一（1）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk12">
    <button onClick="chk('chk12')">一（2）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk13">
    <button onClick="chk('chk13')">一（3）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk14">
    <button onClick="chk('chk14')">一（4）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    </tr>
    </table><br>
    <hr>
    <button onClick="chk('chk2')">二组全选</button>
    <table id="chk2" border=1>
    <tr>
    <td id="chk21">
    <button onClick="chk('chk21')">二（1）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk22">
    <button onClick="chk('chk22')">二（2）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk23">
    <button onClick="chk('chk23')">二（3）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk24">
    <button onClick="chk('chk24')">二（4）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    </tr>
    </table><br>
    <hr>
    <button onClick="chk('chk3')">三组全选</button>
    <table id="chk3" border=1>
    <tr>
    <td id="chk31">
    <button onClick="chk('chk31')">三（1）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk32">
    <button onClick="chk('chk32')">三（2）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk33">
    <button onClick="chk('chk33')">三（3）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    <td id="chk34">
    <button onClick="chk('chk34')">三（4）组全选</button>
    <script>document.write(inputs)</script>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
      

  7.   

    当然，控制范围越大，速度也就越慢。
    优点是不限层次，不限name
      

  8.   

    对checkbox和radio的操作。<script>
    function selectAllOne(sType,isChecked){
    var i;
    var es = document.form1.elements ;
    for(i=0;i<es.length;i++){
    if (es[i].type==sType)
    es[i].checked=isChecked;
    }
    }function selectAllTwo(sType,isChecked){
    var i;
    var es = document.all.tags("input") ;
    for(i=0;i<es.length;i++){
    if (es[i].type==sType)
    es[i].checked=isChecked;
    }
    }function selectAllThree(eName,isChecked){
    var i;
    var es = eval("document.form1."+eName) ;
    if (es.length)
    for(i=0;i<es.length;i++){
    es[i].checked=isChecked;
    }
    else
    es.checked=isChecked;
    }function getValueOne(sType){
    var i;
    var es = document.form1.elements ;
    for(i=0;i<es.length;i++){
    if (es[i].type==sType && es[i].checked)
    alert(es[i].value);
    }
    }function getValueTwo(sType){
    var i;
    var es = document.all.tags("input") ;
    for(i=0;i<es.length;i++){
    if (es[i].type==sType && es[i].checked)
    alert(es[i].value);
    }
    }function getValueThree(eName){
    var i;
    var es = eval("document.form1."+eName) ;
    if (es.length)
    for(i=0;i<es.length;i++){
    if (es[i].checked)
    alert(es[i].value) ;
    }
    else
    if (es.checked)
    alert(es.value) ;
    }
    </script>
    <form name=form1>
    <input type=checkbox name=checkboxa value=a>
    <input type=checkbox name=checkboxa value=b>
    <input type=checkbox name=checkboxa value=c>
    <br/>
    <input type=button name=b value=selectAllOne onclick="selectAllOne('checkbox',true)">
    <input type=button name=b value=selectAllTwo onclick="selectAllTwo('checkbox',true)">
    <input type=button name=b value=selectAllTwo onclick="selectAllThree('checkboxa',true)">
    <br/>
    <input type=button name=b value=noAllOne onclick="selectAllOne('checkbox',false)">
    <input type=button name=b value=noAllTwo onclick="selectAllTwo('checkbox',false)">
    <input type=button name=b value=noAllTwo onclick="selectAllThree('checkboxa',false)">
    <br/>
    <input type=button name=b value=getValueOne onclick="getValueOne('checkbox')">
    <input type=button name=b value=getValueTwo onclick="getValueTwo('checkbox')">
    <input type=button name=b value=getValueTwo onclick="getValueThree('checkboxa')">
    <br/><br/>
    <input type=radio name=radioa value=a>
    <input type=radio name=radiob value=b>
    <input type=radio name=radioc value=c>
    <br/>
    <input type=radio name=sameradio value=samea>
    <input type=radio name=sameradio value=sameb>
    <input type=radio name=sameradio value=samec>
    <br/>
    <input type=button name=b value=selectAllOne onclick="selectAllOne('radio',true)">
    <input type=button name=b value=selectAllTwo onclick="selectAllTwo('radio',true)">
    <input type=button name=b value=selectAllTwo onclick="selectAllThree('sameradio',true)">
    <br/>
    <input type=button name=b value=noAllOne onclick="selectAllOne('radio',false)">
    <input type=button name=b value=noAllTwo onclick="selectAllTwo('radio',false)">
    <input type=button name=b value=noAllTwo onclick="selectAllThree('sameradio',false)">
    <br/>
    <input type=button name=b value=getValueOne onclick="getValueOne('radio')">
    <input type=button name=b value=getValueTwo onclick="getValueTwo('radio')">
    <input type=button name=b value=getValueTwo onclick="getValueThree('sameradio')">
    </form>
      

  9.   

    刚才发现一个问题，form不能嵌套的，所以改用div.
    当然你也可以改成别的容器tag,如 span之类的，而无须修改htc文件
    <html>
    <head>
    <meta name="Author" content="Go_Rush([email protected])">
    <STYLE TYPE="text/css">div{behavior:url('div.htc')}</STYLE>
    </head>
    <body>
    <button onClick="div1.check=((div1.check)?false:true)">一组全选</button>
    <button onClick="div2.check=((div2.check)?false:true)">二组全选</button>
    <br>
    <div id=div1>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </div>
    <br><br><div id=div2>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <div check=true> 
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    </div>
    <input type="checkbox">
    <input type="checkbox">
    </div>
    <br><br></body>
    </html>htc文件
    <PUBLIC:COMPONENT>
    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="element.init()" />
    <PUBLIC:METHOD NAME="init" />
    <PUBLIC:PROPERTY NAME="check" />
    <SCRIPT>
    function init(){
      element.attachEvent("onpropertychange",doSelect);
      doSelect();
    }function doSelect(){
      var colls=element.getElementsByTagName("INPUT");
      var collnum=colls.length;
      for(var i=0;i<collnum;i++){
    if (!/checkbox/i.test(colls[i].type)) continue;
    colls[i].checked=(check)?true:false;
      } 
    }
    </SCRIPT>
    </PUBLIC:COMPONENT>
      

  10.   

    这里的分给：G_Rush(阿舜) ，jnkc，我在另个帖给你分