zoukankan      html  css  js  c++  java
  • web前端 -- jQuery -- jQuery全选框的使用

    根据千峰教育学习视频所练习的笔记 | 学习一段时间,我也有写一点东西的必要了···

    在页面上有这样一个表格:

    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191009082817727-388468700.png)
    我想实现:

    勾选第一行的全选框后,所有的多选框全部被选中;取消选中全选框,其余的多选框不会被全部勾选。

    当所有的复选框个数和被选中的多选框个数一致时,自动勾选全选框,否则,不会自动勾选全选框。

    1. 页面的表格样式

    <body>
    	<table border="1" bgcolor="antiquewhite">
    
    		<thead align="center">
    			<tr>
    				<th><input type="checkbox"></th>
    				<th>课程名称</th>
    				<th>课程ID</th>
    				<th>学分</th>
    			</tr>
    		</thead>
    
    		<tbody>
    			<tr>
    				<td><input type="checkbox"></td>
    				<td>计算机网络</td>
    				<td>A6001</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td><input type="checkbox"></td>
    				<td>数据结构</td>
    				<td>A6002</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td><input type="checkbox"></td>
    				<td>Linux程序设计</td>
    				<td>A6004</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td><input type="checkbox"></td>
    				<td>面向对象程序设计</td>
    				<td>A6006</td>
    				<td>2</td>
    			</tr>
    		</tbody>
    
    	</table>
    </body>
    

    2. 引入jQuery文件,并把代码放到另一个script标签

    <script src="jquery-3.4.1.min.js"></script>
    	<script>
    		// 1.首先取到thead里的input,并设置监听
    		$('thead input').change(function(){
    			// 2.判断当前全选框是否被选中
    			var isChecked = $(this).prop('checked');
                //3.取得tbody下的所有checkbook,来设定prop
    			$('tbody input').prop('checked',isChecked);
    		})	
    </script> 
    

    这样就用全选按钮控制多选框:就是点击课程名称前的全选按钮,所有的多选框都被选中。

    来页面操作,是没有问题的:

    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191009082936302-1118593500.png)
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191009083001103-207110711.png)
    ## 3. 同理,继续完成余下的功能。添加如下代码: ```html ```
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191009083050150-1527471509.png)
  • 相关阅读:
    二、推导式/自省
    一、Python编码规范(PEP 8)/工程结构化
    十、持续集成(Jenkins+Ant+Jmeter)
    九、Jmeter之逻辑控制器
    八、Jmeter分布式测试
    七、ServerAgent监控服务器资源
    六、场景设计/报告分析
    五、集合点/断言/关联
    .html页面引入vue并使用公共组件
    vue.js页面刷新出现闪烁问题的解决
  • 原文地址:https://www.cnblogs.com/hefeifei/p/11639300.html
Copyright © 2011-2022 走看看