消息关闭
    暂无新消息!
以下代码已经实现单行选中变色,取消选择消色,请问如何再添加全选变色的功能?

<html>
<head>
<meta charset="gb2312">  
<script language=javascript for="select" event=onclick>
 var srcElem = findParentObj(event.srcElement, "TR")
 srcElem.runtimeStyle.backgroundColor ? srcElem.runtimeStyle.removeAttribute("backgroundColor") : srcElem.runtimeStyle.backgroundColor = "#CC3300"
</script>
<script>
function findParentObj(obj, strTagName, strId)
{
 while ( obj  && 
    !(!strTagName || obj.tagName == strTagName.toUpperCase())  && 
     (!strId || obj.id == strId)
   )
  obj = obj.parentElement
 return obj
}
</script>
</head>
<body>
<form name="formGroup" id="formGroup" action="#" method="post" target="_self">  

<table id='table1'  border="2" >
    <tr>
   <td>菜单一</td>
   <td><input type="checkbox" name="select">1</td>
    </tr>
    <tr>
   <td>菜单二</td>
      <td><input type="checkbox" name="select">2</td>
    </tr>
    <tr>
   <td>菜单三</td>
      <td><input type="checkbox" name="select">3</td>
    </tr>
    <tr>
   <td>菜单四</td>
   <td><input type="checkbox" name="select">4</td>
    </tr>
    <tr>
   <td>菜单五</td>
   <td><input type="checkbox" name="select">5</td>
    </tr>
</table>
<table border="0">
</tr>
            <tr>  
                <td align="right">全 选</td>  
                <!-- 复选框单击方式 -->  
    
<!-- <td align="left"><input  type="checkbox" name="selectall"  class="input_hide" onClick="AllCheck (this.form);return false;return obj;"value=""> -->
     
     <td align="left"><input  type="checkbox" name="selectall"  class="input_hide" onclick="checkall();" value="">
</table>
<script type="text/javascript">  
  // 选择状态  
  var selectState = false;  
  // 全选或者全取消  
  function AllCheck(thisform)  
  {  
    for (var i = 0; i < thisform.elements.length; i++)  
    {  
      // 提取控件    
      var checkbox = thisform.elements[i];  
      checkbox.checked = !selectState;  
    }  
    selectState = !selectState;  
  }  


function checkall() {  
    var checkbox = document.getElementsByName("select");  
    var selectall = document.getElementsByName("selectall");  
  
    for ( var i = 0; i < checkbox.length; i++) {  
        var tr = checkbox[i].parentElement.parentElement;  
        if (selectall[0].checked == true) { // 如果选中“全选”  
            checkbox[i].checked = true;  
        } else {  
            checkbox[i].checked = false;  
        }  
        // 选中全选后变色  
        if (checkbox[i].checked) {  
            tr.style.backgroundColor = "#CC3300"; // 淡蓝色  
        } else {  
            tr.style.backgroundColor = ""; // 白色  
        }  
    }  
}  


</script> 
</form>
</body>

</html>




1个回答

︿ 0
 <script language=javascript for="select" event= onclick>。你代码从哪里搞来的,这么老旧的。
<form name="formGroup" id="formGroup" action="#" method="post" target="_self">

    <table id='table1' border="2">
        <tr>
            <td>菜单一</td>
            <td><input type="checkbox" name="select">1</td>
        </tr>
        <tr>
            <td>菜单二</td>
            <td><input type="checkbox" name="select">2</td>
        </tr>
        <tr>
            <td>菜单三</td>
            <td><input type="checkbox" name="select">3</td>
        </tr>
        <tr>
            <td>菜单四</td>
            <td><input type="checkbox" name="select">4</td>
        </tr>
        <tr>
            <td>菜单五</td>
            <td><input type="checkbox" name="select">5</td>
        </tr>
    </table>
    <table border="0">
        </tr>
        <tr>
            <td align="right">全 选</td>
            <td align="left"><input type="checkbox" name="selectall" class="input_hide" onclick="checkall(this);" value="">
    </table>
    <script type="text/javascript">
        var ipt = document.getElementById('table1').getElementsByTagName('input');
        //单个
        for (var i = 0; i < ipt.length; i++) ipt[i].onclick = function () { this.parentNode.parentNode.style.backgroundColor = this.checked ? '#cc3300' : ''; }
        function checkall(cb) {
            for (var i = 0; i < ipt.length; i++) {
                ipt[i].checked = cb.checked;
                ipt[i].parentNode.parentNode.style.backgroundColor = cb.checked ? '#cc3300' : '';
            }
        }
    </script>
</form>