jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)
生活随笔
收集整理的這篇文章主要介紹了
jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼實例如下:
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body> 你愛好的運動是?<input id="checkAll" type="checkbox"/>全選/全不選<br/><form><input type="checkbox" name="item" value="足球"/>足球<input type="checkbox" name="item" value="籃球"/>籃球<input type="checkbox" name="item" value="羽毛球"/>羽毛球<input type="checkbox" name="item" value="乒乓球"/>乒乓球<br/><input id="btn1" type="button" value="全選"/><input id="btn2" type="button" value="全不選"/><input id="btn3" type="button" value="反選"/><input id="btn4" type="button" value="提交"/></form><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">var $checkAll = $('#checkAll');var $items = $(':checkbox[name=item]');//1.點擊'全選'，選中所有愛好$('#btn1').click(function() {$items.prop('checked',true);$checkAll.prop('checked',true);});//2.點擊'全不選'，所有愛好都不勾選$('#btn2').click(function() {$items.prop('checked',false);$checkAll.prop('checked',false);});//3.點擊'反選'，改變所有愛好的勾選狀態$('#btn3').click(function() {$items.each(function() {this.checked = !this.checked;});//統計沒有被選中的個數，如果是0的話$checkAll.prop('checked',$items.not(':checked').length==0);});//4.點擊'提交'，提示所有勾選的愛好$('#btn4').click(function() {$items.filter(':checked').each(function() {alert(this.value);//this指的是當前被選中的DOM元素});});//5.點擊'全選/全不選’，選中所有愛好，或者全不選中$checkAll.click(function() {$items.prop('checked',this.checked);});//6.點擊某個愛好時，必要時更新‘全選/全不選’的選中狀態$items.click(function() {$checkAll.prop('checked',$items.not(':checked').length==0);});</script></body> </html>界面效果如下:
測試的話，請讀者復制代碼自行驗證
總結
以上是生活随笔為你收集整理的jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS对象与Dom对象与jQuery对象之
- 下一篇： jQuery面试题-区别mouseove