js实现checkbox全选和反选示例

复选框全选示例



代码如下:

<input type="checkbox" name="selectall" value=on onclick="selectAll()">

function selectAll(form) {
 var obj = document.getElementsByName('selectall');
 var cks = document.getElementsByTagName("input");
 var ckslen = cks.length;
 for(var i=0;i<ckslen-1;i++) {
  if(cks[i].type == 'checkbox') {
   cks[i].checked = obj[0].checked;
  }
 }
}

复选框全选与全不选示例



代码如下:

<html>
<head>
<script>
function selectAll(){
 var checklist = document.getElementsByName ("selected");
   if(document.getElementById("controlAll").checked)
   {
   for(var i=0;i<checklist.length;i++)
   {
      checklist[i].checked = 1;
   }
 }else{
  for(var j=0;j<checklist.length;j++)
  {
     checklist[j].checked = 0;
  }
 }
}
</script>
</head>
<body>
<form>
<input onclick="selectAll()" type="checkbox"   name="controlAll" style="controlAll" id="controlAll"/>全选<br>
1:<input type="checkbox" name="selected" value="1"/><br>
2:<input type="checkbox" name="selected" value="2"/><br>
3:<input type="checkbox" name="selected" value="3"/><br>
4:<input type="checkbox" name="selected" value="4"/><br>
5:<input type="checkbox" name="selected" value="5"/><br>
6:<input type="checkbox" name="selected" value="6"/><br>
</form>
<p>
js按键事件说明<br>
onClick事件<br>
鼠标单击事件是最常见的事件之一，当用户单击鼠标按钮时。同时onClick指定的事件处理程序或代码将被调用执行。<br>
文件说明<br>
第11行使用 onClick事件弹出警告提示对话框。<br>
onChange事件<br>
onChange事件就是当文本框的内容改变时发生的事件。<br>
文件说明<br>
第11行使用onChange事件，当文本框内容发生改变的时候弹出警告提示对话框。<br>
onSelect事件<br>
onSelect事件就是当文本框的内容被选中时发生的事件。<br>
文件说明<br>
第11行使用onSelect事件，当文本框中内容被选中的时候，警告提示对话框显示的结果。<br>
onFocus事件<br>
onFocus事件就是当光标落在文本框中时发生的事件。<br>
文件说明<br>
第12行使用Onfocus事件，当用鼠标选中第二个文本框的时候，自动触发Onfocus事件，弹出一个对话框。<br>
onLload事件<br>
onload事件是当前的网页被显示时发生的事件。<br>
文件说明<br>
第9行使用OnLoad事件，当打开网页的时候自动打开一个警示框。<br>
onUnload事件<br>
onUnload事件是当当前的网页被关闭时发生的事件。<br>
文件说明 <br>

第9行使用onUnload事件，当关闭网页的时候自动打开一个警示框。<br>
onBlur事件<br>
onBlur事件就是当光标离开文本框中时发生的事件。<br>
15  <br>
文件说明<br>
第12行使用onBlur事件，当用鼠标离开第二个文本框的时候，自动触发onBlur事件，弹出一个对话框。<br>
onMouseover事件<br>
onMouseover事件是指当鼠标移动到页面元素上方时发生的事件。、、<br>
文件说明<br>
第10行使用onMouseover事件，当鼠标指向滚动文字的时候，自动触发onMouseover事件。<br>
onMouseout事件<br>
onmouseout事件是指当鼠标离开页面元素上方时发生的事件。文件说明<br>
第10行使用onmouseout事件，当鼠标离开滚动文字的时候，自动触发 onmouseout事件。<br>
onDbclick事件<br>
当鼠标双击鼠标按钮时，产生ondbclick事件。同时ondbclick指定的事件处理程序或代码将被调用执行。<br>
文件说明<br>
第11行使用ondbclick事件弹出警告提示对话框。<br>
</p>
</body>
</html>

赞 (0)

相关推荐

  • js选取多个或单个元素的实现代码（用class）

    复制代码 代码如下: function getElementsByClassName(elem_name,elem_tags) { //elem_name:查询的class名,elem_tags:在哪个元素下查找 if(elem_tags == null) { elem_tags = '*'; } var all_elem = document.getElementsByTagName(elem_tags);//返回一个元素数组 var arr = []; //定义一个空数组,用于存放结果 fo

  • JavaScript选取(picking)和反选(rejecting)对象的属性方法

    有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select (选取) 几个字段: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': 'Joh

  • javascript实现简单的全选和反选功能

    javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt

  • javascript下兼容firefox选取textarea文本的代码

    主要用到的js代码 复制代码 代码如下: function getSelectedText(){         var selectedText;         var textField=document.getElementById('inputTextarea');         if(window.getSelection) selectedText=getTextFieldSelection(textField);//getTextFieldSelection(document.

  • AngularJS实现全选反选功能

    AngularJS实现全选反选功能

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo

  • javascript实现鼠标选取拖动或Ctrl选取拖动

    *{position:absolute;} #panel *{border:1px solid gray} /**********判断浏览器**********/ var isIE = false; if(document.all) isIE = true; /*******HashArray*******/ function HashArray(){ this.keyList = new Array(); this.put = function(key, value){ this[key] =

  • js实现checkbox全选、不选与反选的方法

    本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设

  • ExtJS如何设置与获取radio控件的选取状态

    获取 复制代码 代码如下: function IsChecked(radioId) { return Ext.getCmp(radioId).checked; } 设置 复制代码 代码如下: function SetRadio(radioId, isChecked) { Ext.getCmp(radioId).setValue(isChecked);//或者setValue("on")也可以设置为选中 }

  • 两种不同的方法实现js对checkbox进行全选和反选

    通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c

  • JS获得选取checkbox整行数据的方法

    本文实例讲述了JS获得选取checkbox整行数据的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js</title> </head> <script language="java

随机推荐