分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jquery全选、全不选、反选

发布时间:2023-09-06 01:14责任编辑:傅花花关键词:暂无标签
<!doctype html> <html lang="en"> <head> ????<meta charset="UTF-8"> ????<title>全选、全不选、反选</title> ????<style type="text/css"> ????????#choose input { ????????????display: block; ????????} ????</style> ????<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> ????<script type="text/javascript"> ????????$(function(){ ????????????var $choose = $("#choose input"); ????????????//全选 ????????????$("#all").click(function(){ ????????????????$choose.each(function(){ ????????????????????$(this).prop("checked",true); ????????????????}); ????????????}); ????????????//全不选 ????????????$("#not").click(function(){ ????????????????$choose.prop("checked",false); ????????????}); ????????????//反选 ????????????$("#reverse").click(function(){ ????????????????$choose.each(function(){ ????????????????????$(this).prop("checked",!$(this).prop("checked")); ????????????????}); ????????????}); ????????}); ????</script> </head> <body> ????<div id="box-function"> ????????<input id="all" type="button" value="全选" /> ????????<input id="not" type="button" value="全不选" /> ????????<input id="reverse" type="button" value="反选" /> ????</div> ?????<div id="choose"> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????????<input type="checkbox" /> ????</div> </body> </html>

jquery全选、全不选、反选

原文地址:http://www.cnblogs.com/719907411hl/p/7612238.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved