html input关于选项框全选和全不选的实现

来源：互联网发布：数据建模工具编辑：程序博客网时间：2024/04/29 09:26

一次笔试中出现的题目，也非常简单。

使用原生js实现的方法是，当全选的被勾选中的时候，把上面所有的选项的checked改为true,还可以使用jQuery，那就更加简单了。

代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><form>  <input name="userid" type="checkbox" value="1" />      <input name="userid" type="checkbox" value="2" />      <input name="userid" type="checkbox" value="3" />      <input name="userid" type="checkbox" value="4" />      <input name="userid" type="checkbox" value="5" />      <input name="userid" type="checkbox" value="6" />      <br />      <input type="button" value="全选" id="all"/>  <br />      <input type="button" value="全不选" id="resove"/>      <br />     </form>  <script type="text/javascript" src="jquery-1.11.3.js"></script><script type="text/javascript">//使用jsvar all=document.getElementById("all");console.log(all);var resove=document.getElementById("resove");all.onclick=function(){var arr=document.querySelectorAll("[type='checkbox']");arr.forEach(function(val) {val.checked=true;});}resove.onclick=function(){var arr=document.querySelectorAll("[type='checkbox']");arr.forEach(function(val) {val.checked=false;});}//使用jQuery// $("#all").click(function(){// $("form :checkbox").prop("checked",true);// });// $("#resove").click(function(){// $("form :checkbox").prop("checked",false);// })</script></body></html>

使用jQuery记得先引入jQuery

0 0