JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
   
  <script>
  function checkAll( booleanValue )
  {
  var checkboxset= document.getElementsByName("hobby");
  for(var i =0;i<checkboxset.length; i++ )
  {
  checkboxset[i].checked = booleanValue;
  }
   
  }
   
  function reverseCheck(){
   
  //找到所有的checkbox
  //针对每一个checkbox，判断其当前的checked属性，并且置反
   
  var checkboxset= document.getElementsByName("hobby");
  for(var i =0;i<checkboxset.length; i++ )
  {
  checkboxset[i].checked = !checkboxset[i].checked;
   
  }
   
  }
   
   
  </script>
   
   
  </head>
  <body>
   
  <h1>请选择你的爱好：</h1>
  全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
   
  <input type="checkbox" name="hobby" value="football" onclick=""/>足球
  <input type="checkbox" name="hobby" value="basketball" onclick=""/>篮球
  <input type="checkbox" name="hobby" value="swim" onclick=""/>游泳
  <input type="checkbox" name="hobby" value="singing" onclick=""/>唱歌<br/>
   
  <input type="button" value="全选" onclick="checkAll(true)"/> <input type="button" value="全不选" onclick="checkAll(false)"/>
  <input type="button" value="反选" onclick="reverseCheck()"/>
  </body>
   
  </body>
  </html>
 
时间： 2024-08-02 04:51:50

JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM的相关文章

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

JavaScript、全选反选-课堂笔记

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="button" value="全选" id="all"> <input t

JavaScript之全选/反选/取消，for循环闭包

需求:table中要求点击红色单元格和点击checkbox的效果一样,最后一行点击就是全选.反选.取消选择的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ width: 400px; height: 15px; backgrou

javascript实现全选，反选及全不选(其一)

javascript实现全选,反选及全部选 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> <

javascript教程系列41:表格全选反选,经典案例详解

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collap

关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来促进进步. 我也会尽可能把我查找到资料的出处引出来,以此来感恩对我提供帮助的人们. 正题如下 一.关于Winform下DataGridView中实现checkbox全选反选.同步列表项的处理 1.checkbox的添加:在设计页面选择编辑列在新添加的列中注意如下几个属性: SortMode = No

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

jQuery实现checkbox（复选框）选中、全选反选代码

谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr

Android GridView实现全选反选效果

原文:Android GridView实现全选反选效果 源代码下载地址:http://www.zuidaima.com/share/1550463727848448.htm 非常实用的Demo,很多时候都会用到,所以特意上传上来给大家分享. 另外,建议猿们以后上传这种类似可运行的程序源码时,最好都附上截图,这样其他猿也知道是不是自己想要的.