html 中的 javascript 全选/反选问题

<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>

请问哪里出错了啊,按钮都没效果
回答1楼的,我加了, 还是有个问题 提示按钮调用的事件缺少对象,

<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>


运行效果:

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2018-03-11
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;
}
}
}本回答被提问者和网友采纳
第2个回答  2008-08-20
在 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>
相似回答