html 中的 javascript 全选/反选问题10

发布网友发布时间：2023-11-19 15:55

共3个回答

热心网友时间：2024-12-04 21:11

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>check test</title>
</head>
<body>
  <form name="formGroup" id="formGroup" action="#" method="post" target="_self">
    <table border="1" cellpadding="2" cellspacing="1" class="table_hide">
      <tr class="table_title">
        <td width="50" align="center" class="text_center">序号</td>
        <td width="40" align="center" class="text_center">选择</td>
        <td width="100" align="center"></td>
        <td width="100" align="center"></td>
      </tr>
      <tr>
        <td align="center" class="text_center">1</td>
        <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
        <td align="center"></td>
        <td align="center"></td>
      </tr>
      <tr>
        <td align="center" class="text_center">2</td>
        <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
        <td align="center"></td>
        <td align="center"></td>
      </tr>
      <tr>
        <td align="center" class="text_center">3</td>
        <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
        <td align="center"></td>
        <td align="center"></td>
      </tr>
      <tr>
        <td align="center">全选</td>
        
        <td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>
        
        <td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="选/反选"></td>
        <td align="center"></td>
      </tr>
    </table>
  </form>
</body>
<script type="text/javascript">
  // 选择或者反选 checkbox
  function CheckSelect(thisform)
  {
    // 遍历 form
    for ( var i = 0; i < thisform.elements.length; i++)
    {
      // 提取控件
      var checkbox = thisform.elements[i];
      // 检查是否是指定的控件
      if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)
      {
        // 正选
        checkbox.checked = true;
      }
      else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)
      {
        // 反选
        checkbox.checked = false;
      }
    }
  }
</script>
</html>

运行效果：

热心网友时间：2024-12-04 21:12

else 之前应该加的是 } 而不是 {

这样修改效率高一点

function selectAll()
{

var allCheckBoxs = document.getElementsByName("coffee");
var desc = document.getElementById("like");

if(desc.value == "都喜欢")
{
desc.value = "都不喜欢";
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = true;
}
}
else
{
desc.value = "都喜欢";
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = false;
}
}
}

热心网友时间：2024-12-04 21:12

在 else 前加一个 { 就行了。

补充：
这是我改后的代码，自己机子上没问题。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">

function selectAll(){

var allCheckBoxs=document.getElementsByName("coffee");
var desc = document.getElementById("like").value;

if(desc=="都喜欢"){
document.getElementById("like").value="都不喜欢";
for(var i=0;i<allCheckBoxs.length;i++)
{
allCheckBoxs[i].checked=true;
}
}
else{
document.getElementById("like").value="都喜欢";
for(var i=0;i<allCheckBoxs.length;i++)
{
allCheckBoxs[i].checked=false;
}
}
}

</script>
</head>

<body>

<p>你喜欢那种类型咖啡</p>
<form>
<input type="checkbox" name="coffee" value="cream">蓝山咖啡<br>
<input type="checkbox" name="coffee" value="sugar" >摩卡<br>
<input type="checkbox" name="coffee" value="sugar">拿铁<br>
<input type="checkbox" name="coffee" value="sugar">卡布奇诺<br>
<input type="checkbox" name="coffee" value="sugar">爱尔兰咖啡<br>
<input type="button" id="like" value="都喜欢" onClick="selectAll()">
</form>

</body>
</html>

html 中的 javascript 全选&#47;反选问题10

html 中的 javascript 全选/反选问题10