html 中的 javascript 全选反选问题

html 中的 javascript 全选反选问题,第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>

运行效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script language="javascript">

window.onload=function()

{

var arr =document.getElementsByTagName('input')

var b = document.getElementById("btu")

var iSelect=true

b.onclick=function()

{

if(iSelect==true)

{

for(var i=0i<arr.lengthi++)

{

arr[i].checked=true

}

iSelect=false

b.value='反选'

}

else if(iSelect==false)

{

for(var i=0i<arr.lengthi++)

{

arr[i].checked=false

}

iSelect=true

b.value='全选'

}

}

}

</script>

</head>

<body>

<form>

<input type="checkbox" value="读书" name="like" />读书<br />

<input type="checkbox" value="看书" name="like" />看书<br />

<input type="checkbox" value="写书" name="like" />写书<br />

<input type="checkbox" value="听书" name="like" />听书<br />

<input type="button" id="btu" value="全选" />

</form>

</body>

</html>

你错的有点不合理啊,首先js是类c语言,但是一种弱语言,定义变量是用var 你用的是int。其次var b=document.getElementById("btu")b是你选取的元素对象,你怎么就可以直接用来判断(b=="全选")这是不对的。我在你的基础上改好了,你自己好好看看吧

var div=document.getElementById(div的id)

var chks=div.getElementsByName(checkbox的name)//checkbox设为同一个name

for(var i=0i<chks.lengthi++){

chks[i].checked//全选

chks[i].checked=!chks[i].checked //反选

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6099621.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存