通过jquery实现复选框全选效果

- 日理万妓 2021-12-11 09:43 259阅读 0赞

**通过jquery实现复选框全选效果**

实现的js和页面的HTML如下：

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    	
    	<script type="text/javascript">
    	//页面加载
    		$(function(){
    			//页面加载完后，给全选框添加一个点击事件
    			$("input:checkbox:first").click(
    				function(){
    					//var t=$("input:checkbox:first").prop("checked");
    					//this表示当前元素，谁调用了这个函数，谁就是当前元素。
    					//this但是他表示的dom元素
    					var t=$(this).prop("checked");
    					$("[name=f]").prop("checked",t);
    				}
    			);
    		});
    		function test(){
    			//处于选中的状态的复选框
    			if($("[name=f]:checked").size()==$("[name=f]").size()){
    				$("input:checkbox:first").prop("checked",true);
    			}else{
    				$("input:checkbox:first").prop("checked",false);
    			}
    		}
    	</script>
      </head>
      
      <body>
        <input type="checkbox"/>全选<br/>
        <input type="checkbox" name="f" onclick="test()"/>1<br/>
        <input type="checkbox" name="f" onclick="test()"/>2<br/>
        <input type="checkbox" name="f" onclick="test()"/>3<br/>
      </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery复选框全选反选操作

<!DOCTYPE html> <html > <head> <title> jquery-ajax </title> <sc

刺骨的言语ヽ痛彻心扉/ 2022年08月18日 12:09/ 0 赞/ 229 阅读

相关 jQuery实现复选框的全选和反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

绝地灬酷狼/ 2022年07月11日 15:24/ 0 赞/ 186 阅读

相关 JQuery实现复选框全选

首先一种最low的方法 $("checkAll").click(function(){ var $checkRows = $("input[

冷不防/ 2022年05月14日 02:09/ 0 赞/ 249 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 270 阅读

相关原生js实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和

小鱼儿/ 2022年04月06日 07:56/ 0 赞/ 363 阅读

相关 jquery实现复选框的全选与全不选与反选

<html> <head> <meta charset="utf-8" /> <title>全选/全不选/反选</title>

古城微笑少年丶/ 2022年04月03日 06:26/ 0 赞/ 250 阅读

相关用JavaScript实现复选框的全选/全不选效果

判断复选框是否被选中的属性是checked，如果checked属性的值为true，则说明复选框已选中，如果checked属性的值为false，则说明复选框未被选中，可以先将每个

Bertha 。/ 2022年03月25日 18:50/ 0 赞/ 256 阅读

相关通过jquery实现复选框全选效果

通过jquery实现复选框全选效果实现的js和页面的HTML如下：  <script type="te

- 日理万妓/ 2021年12月11日 09:43/ 0 赞/ 260 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 372 阅读

相关 jQuery使复选框一键全选/全不选

<form> 　　你爱好的运动是? 　　<input type="checkbox" id="hxy"/>全选/不全选　　<br /> 　　<input ty

青旅半醒/ 2021年10月30日 05:32/ 0 赞/ 377 阅读