js 对 checkBox 的操作

最新推荐文章于 2024-03-01 09:01:11 发布

最新推荐文章于 2024-03-01 09:01:11 发布 · 322 阅读

文章标签：

#J#

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了几种实用的JavaScript函数来批量操作网页上的复选框（checkbox），包括全选与反选、查找是否有选中项、全选指定ID的同名复选框等功能，并提供了具体的实现代码。

1、全选与反选

1、参数 checkName 为checkbox的名字
function doSelectAll(checkName,state){
    var chkboxes = document.getElementsByName(checkName);
        for (var i=0; i<chkboxes.length; i++) {
            chkboxes[i].checked = state;
        }
   }

2、遍历查找checkbox 是否有一项选中

function isCheck(checkName,){
    var chkboxes = document.getElementsByName(checkName);
     var flag = false;
    for (var i=0; i<chkboxes.length; i++) {
            if (chkboxes[i].checked == true){
            	flag = true;
            	break;
            };
        }
}

3、全选页面上的checkbox

function selectAlls(state) { 
  var inputs = document.getElementsByTagName("input"); 
  for(var i =0;i<inputs.length;i++) { 
    if(inputs[i].type == "checkbox") { 
        inputs[i].checked =state; 
     } 
  } 
}

4、全选的所有指定id名称的同名checkbox

function selectAllCheckboxByID(state,name,id) { 
  var ids = document.getElementsByName(name); 
  for (var i = 0; i < ids.length; i++) { 
         if(ids[i].id == id) {   //进行比较checkbox的id  是否相等
           ids[i].checked = state; 
     } 
}

5、全选当前行的checkbox

/** 
*得到鼠标所单击的行 
*@type Object 
*/ 
function GetRow(oElem) { 
   while (oElem) { 
         if (oElem.tagName.toLowerCase() == "tr" &&                 oElem.parentElement.tagName.toLowerCase() == "tbody") { 
         return oElem; 
       } 
        if (oElem.tagName.toLowerCase() == "table" ||  oElem.tagName.toLowerCase() == "th") { 
          return false; 
        } 
       oElemoElemoElem = oElem.parentElement; 
   } 
} 

//选取当前行的checkbox
function selectRowCheckbox(state) { 
    var row = GetRow(window.event.srcElement); 
    var cells = row.childNodes; 
    for(var i=0;i<cells.length;i++) { 
           var cell = cells[i].childNodes[0]; 
           if(cell.tagName == "INPUT") { 
              cell.checked = state; 
           } 
      } 
 }

6、选中指定值的checkbox

//参数value 是指 输入值的 如有多个，以 , 隔开
function selectCheckbox(name,value) { 
   var checkObject = document.getElementsByName(name); 
   var values = value.split(","); 
   for(var j = 0; j < values.length; j++) { 
         for (var i = 0; i < checkObject.length; i++) { 
            if(checkObject[i].value == values[j]) { 
                checkObject[i].checked = true; 
                         break; 
            } 
         } 
     } 
}