• 【jQuery】复选框的全选、反选,推断哪些复选框被选中


    本文与《【JavaScript】复选框的全选、反选。推断哪些复选框被选中》(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果:


    布局还是相同的布局,仅仅是因为在jQuery框架中,无须再为button,指定特定的onclick事件处理函数,直接使用jQuery指定就可以:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>全选、反选</title>
    		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        </head>
        <body>
    	<button id="selected"/>哪里复选框被选中? </button>
    	<button id="selectAll"/>全选</button>
    	<button id="selectReserve"/>反选</button><br/>
    	1<input type="checkbox" name="checkBoxGroup" value="1"/><br/>
    	2<input type="checkbox" name="checkBoxGroup" value="2"/><br/>
    	3<input type="checkbox" name="checkBoxGroup" value="3"/><br/>
    	4<input type="checkbox" name="checkBoxGroup" value="4"/><br/>
    </body>
    </html>
    之后在jQuery中。取name为checkBoxGroup的复选框数组。直接能够这样写:$(":checkbox[name='checkBoxGroup']")。当然$("input[type='checkbox'][name='checkBoxGroup']")也行。仅仅是$(":checkbox[name='checkBoxGroup']")代码更加简单,注意checkbox前面的冒号。

    拿出来的东西是与Javascript的document.getElementsByName("xx")一样。同位复选框数组。

    仅仅是在jQuery中能够直接利用each去遍历。为复选框设置选中与否使用prop,不要用attr。详细在《【jQuery】对于复选框操作的attr与prop》(点击打开链接)已经说过了。

    <script type="text/javascript">
    	//哪里复选框被选中?
    	$("#selected").click(function(){
    		var str="被选中的复选框:";
    		$(":checkbox[name='checkBoxGroup']:checked").each(function(){
    			str+=$(this).val()+",";
    		});
    		alert(str);
    	});
    	//全选
    	$("#selectAll").click(function(){
    		$(":checkbox[name='checkBoxGroup']").each(function(){
    			$(this).prop("checked",true);
    		});
    	});
    	//反选
    	$("#selectReserve").click(function(){
    		$(":checkbox[name='checkBoxGroup']").each(function(){
    			$(this).prop("checked",!$(this).prop("checked"));
    		});
    	});	
    </script>


  • 相关阅读:
    数据结构与算法(一)--数组
    Lucene学习
    java虚拟机面试题(JVM)
    Java开发面试题归类( 题目篇)
    java虚拟机学习(六)
    java虚拟机学习(五)--垃圾收集器总结
    21_异常_第21天(异常、企业面试题,思维导图下载)
    20_集合_第20天(Map、可变参数、Collections)
    19_集合_第19天(List、Set)
    18_集合框架_第18天(集合、Iterator迭代器、增强for循环 、泛型)
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/7116862.html
Copyright © 2020-2023  润新知