实现checkbox复选框全选、反选及全不选的代码

前端开发   发布日期:2023年05月27日   浏览次数:435

实现checkbox复选框全选、反选及全不选的示例代码,同时可以判断如果是禁用disabled状态的复选框会无效跳过。

HTML代码:

  1. <input type="checkbox" name="xuanze_fz" value="九品源码" />
  2. <input type="checkbox" name="xuanze_fz" value="PHP博客" />
  3. <input type="checkbox" name="xuanze_fz" value="www.19jp.com" />
  4.  
  5. <button class="btn btn_big" type="button" onClick="chkall(0)" >反选</button>
  6. <button class="btn btn_big" type="button" onClick="chkall(1)" >全选</button>
  7. <button class="btn btn_big" type="button" onClick="chkall(2)" >全不选</button>

JS代码:

  1. function chkall(v){
  2. var ck=document.getElementsByName("xuanze_fz");//定义checkbox数组变量
  3. for(var i=0;i<ck.length;i++){
  4. if (!ck[i].disabled){//被禁用的不执行操作选择,跳过
  5. if (v==0){
  6. ck[i].checked=!ck[i].checked;
  7. }else if (v==1){
  8. ck[i].checked='checked';
  9. }else if (v==2){
  10. ck[i].checked='';
  11. }
  12. }
  13. }
  14. }


以上就是实现checkbox复选框全选、反选及全不选的代码的详细内容,更多关于实现checkbox复选框全选、反选及全不选的代码的资料请关注九品源码其它相关文章!