js_鼠标点击事件：简单全选功能

小灰灰 2022-08-03 16:41 188阅读 0赞

利用鼠标的onclick事件，实现简单的全选功能

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>onclick鼠标点击事件</title>
    <script>
      window.onload = function() {
    	 /*第一种方式，和id关联
    	 var cb = document.getElementById("cb");
    	 cb.onclick = function() {
    		alert("点击checkbox"); 
    	 }
    	 */
    	 /*
    	 document.onclick = function() {
    		 //窗体点击事件
    		  alert("点击窗体");
    	 }
    	 */
      }
      function choose(thisa){
    	//alert("点击choose");
    	//alert(thisa.checked);
    	var cbox = document.getElementsByName("cbox");
    	//名字相同，自动生成一个数组
    	var len = cbox.length;
    	for(var i = 0; i < len; i++) {
    	    cbox[i].checked = thisa.checked;	
    	}	  
      }
    </script>
    </head>
    
    <body>
    <table border="2">
        <tr>
        <td><input id="cb" type="checkbox" onClick="choose(this)" name="cbox">全选</td>
        <td>选项内容</td>
        </tr>
       <tr>
        <td><input id="cb" type="checkbox" name="cbox"></td>
        <td>aaaaaaaaaa</td>
       </tr>
        <tr>
        <td><input id="cb" type="checkbox" name="cbox"></td>
        <td>aaaaaaaaaa</td>
       </tr>
       <tr>
        <td><input id="cb" type="checkbox" name="cbox"></td>
        <td>aaaaaaaaaa</td>
       </tr>
       <tr>
        <td><input id="cb" type="checkbox" name="cbox"></td>
        <td>aaaaaaaaaa</td>
       </tr>
       <tr>
        <td><input id="cb" type="checkbox" name="cbox"></td>
        <td>aaaaaaaaaa</td>
       </tr>
    </table>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 js鼠标添加右击事件

前言在做ITOO项目课程表教师端这块儿时，发现只有修改、添加、导入的功能，验收的时候说添加一个删除的功能吧，右击删除，接下来就是实践了，因为这块本来有双击事件，

超、凢脫俗/ 2022年09月25日 13:29/ 0 赞/ 211 阅读

相关鼠标右键点击事件

方式一 <el-button @contextmenu.prevent="clickRight()">保存</el-button> .prevent可以阻止弹出

我不是女神ヾ/ 2022年09月10日 10:27/ 0 赞/ 242 阅读

相关鼠标点击事件大全

click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标

红太狼/ 2022年09月09日 06:41/ 0 赞/ 223 阅读

相关 js_鼠标点击事件：简单全选功能

利用鼠标的onclick事件，实现简单的全选功能 <!doctype html> <html> <head> <meta charset="u

小灰灰/ 2022年08月03日 16:41/ 0 赞/ 189 阅读

相关 checkbox解决手动点击后全选功能失效

function changeCheck(el){ //将html节点转为对象 var obj = jQuery(el); var

梦里梦外;/ 2022年06月05日 00:18/ 0 赞/ 176 阅读

相关 JavaFX TreeView注册鼠标点击事件

使用JavaFX的TreeView控件，需要注册树节点的鼠标点击事件，下面是示例，鼠标点击之后，可以获取当前节点的值。这个是定义的TreeView： TreeView<St

短命女/ 2022年05月22日 12:18/ 0 赞/ 333 阅读

相关 div的鼠标点击事件

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]"> <head> <

怼烎@/ 2022年04月13日 11:22/ 0 赞/ 573 阅读

相关 OpenGL鼠标点击事件

include <windows.h> // Windows的头文件 include <gl\gl.h> // OpenGL32库

我就是我/ 2022年03月29日 04:56/ 0 赞/ 376 阅读

相关 js之全选即点击全选标签可选择全部复选框

目标效果：网页全选功能，即点击全选标签可选择全部复选框实现代码如下 <!DOCTYPE html> <html lang="en"> <head>

野性酷女/ 2022年01月07日 04:51/ 0 赞/ 354 阅读

相关 OpenGL鼠标点击事件

include <windows.h> // Windows的头文件 include <gl\gl.h> // OpenGL32库

Love The Way You Lie/ 2021年12月16日 10:19/ 0 赞/ 447 阅读