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

- 日理万妓 2021-12-11 09:43 360阅读 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 条评论，360人围观）

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

相关阅读

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

jQuery实现复选框的全选和反选：截图如下： ![SouthEast][] 代码如下： index.jsp: <%@ page language="jav

怼烎@/ 2024年02月17日 14:16/ 0 赞/ 58 阅读

相关 jquery 复选框：全选和非全选

html <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我会带着你远行/ 2023年06月15日 13:28/ 0 赞/ 25 阅读

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

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

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

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

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

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

相关 JQuery实现复选框全选

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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