1. 首頁 > 生活 > >

js控制checkbox選中和不選中 jsp判斷checkbox是否選中

小知識



文章插圖
js控制checkbox選中和不選中 jsp判斷checkbox是否選中

文章插圖
多選框全選與全不選的實現
多選框全選與全不選是前端開發人員必學的案例了，這里完成了以下需求：
當用戶勾上“全選”時，自動選中所有語言，并把“全選”變成“全不選”；當用戶去掉“全不選”時，自動不選中所有語言；當用戶點擊“反選”時，自動把所有語言狀態反轉（選中的變為未選，未選的變為選中）；當用戶把所有語言都手動勾上時，“全選”被自動勾上，并變為“全不選”；當用戶手動去掉選中至少一種語言時，“全不選”自動被去掉選中，并變為“全選” 。
網頁代碼部分如下：
<form id="test-form" action="test"><legend>請選擇想要學習的編程語言：</legend><fieldset><p><label class="selectAll"><input type="checkbox"><span class="selectAll">全選</span><span class="deselectAll">全不選</span></label><a class="invertSelect">反選</a></p><p><label><input type="checkbox" name="lang" value="http://www.mnbkw.com/jxjc/190580/javascript"> JavaScript</label></p><p><label><input type="checkbox" name="lang" value="http://www.mnbkw.com/jxjc/190580/python"> Python</label></p><p><label><input type="checkbox" name="lang" value="http://www.mnbkw.com/jxjc/190580/ruby"> Ruby</label></p><p><label><input type="checkbox" name="lang" value="http://www.mnbkw.com/jxjc/190580/haskell"> Haskell</label></p><p><label><input type="checkbox" name="lang" value="http://www.mnbkw.com/jxjc/190580/scheme"> Scheme</label></p><p><button type="submit">Submit</button></p></fieldset></form>先獲取dom元素
varform = $('#test-form'),langs = form.find('[name=lang]'),selectAll = form.find('label.selectAll :checkbox'),selectAllLabel = form.find('label.selectAll span.selectAll'),deselectAllLabel = form.find('label.selectAll span.deselectAll'),invertSelect = form.find('a.invertSelect');【js控制checkbox選中和不選中 jsp判斷checkbox是否選中】全選與全不選實現起來很簡單,利用jquery對象的prop方法來設置選中狀態，需要注意的是這里不能使用attr()方法：
// 全選與全不選selectAll.on("change",()=>{if(selectAll.prop("checked")) {//全選langs.prop("checked",true)selectAllLabel.hide()deselectAllLabel.show()}else{// 全不選langs.prop("checked",false)selectAllLabel.show()deselectAllLabel.hide()}})反選的方法也很簡單：
invertSelect.on("click",()=>{//jquery對象要先使用Array.from方法轉換成數組，利用數組來遍歷//需要注意的是，遍歷的每一個元素是dom對象，而不是jquery對象了,//不能再使用prop方法了Array.from(langs).forEach(item=>item.checked=!item.checked)})當用戶把所有語言都手動勾上時，“全選”被自動勾上，并變為“全不選” 。實現這個需求，需要讓change事件綁定所有的name為lang的checkbox對象（langs）,事件觸發時，要遍歷所有的langs,如果全部為選中狀態，則“全選”自動勾上，并變為“全不選” 。這里獲取所有的選中狀態的checkbox,可以使用 $(‘[name=lang]:checked’),代碼如下：
var langsChecked = $('[name=lang]:checked')//如果選中的checkbox數量大于等于5，即是全部選中if(langsChecked.length>=5){//全選打勾selectAll.prop("checked",true)//全選標簽隱藏selectAllLabel.hide()//全不選標簽顯示deselectAllLabel.show()}else{//全選去掉勾selectAll.prop("checked",false)//全選標簽顯示selectAllLabel.show()//全不選標簽隱藏deselectAllLabel.hide()}為避免與之前的代碼顯示沖突，這里封裝為一個方法，前面的代碼也需要使用該方法,完整代碼如下：
$(function(){varform = $('#test-form'),langs = form.find('[name=lang]'),selectAll = form.find('label.selectAll :checkbox'),selectAllLabel = form.find('label.selectAll span.selectAll'),deselectAllLabel = form.find('label.selectAll span.deselectAll'),invertSelect = form.find('a.invertSelect');// 全選與全不選selectAll.on("change",()=>{if(selectAll.prop("checked")) {//全選langs.prop("checked",true)selectAllLabel.hide()deselectAllLabel.show()}else{// 全不選langs.prop("checked",false)selectAllLabel.show()deselectAllLabel.hide()}select()})//反選invertSelect.on("click",()=>{//jquery對象要先使用Array.from方法轉換成數組，利用數組來遍歷//需要注意的是，遍歷的每一個元素是dom對象，而不是jquery對象了,//不能再使用prop方法了Array.from(langs).forEach(item=>item.checked=!item.checked)select()})//當用戶把所有語言都手動勾上時，“全選”被自動勾上，并變為“全不選”；//當用戶手動去掉選中至少一種語言時，“全不選”自動被去掉選中，并變為“全選” 。function select(){var langsChecked = $('[name=lang]:checked')console.log(langsChecked)//如果選中的checkbox數量大于等于5，即是全部選中if(langsChecked.length>=5){selectAll.prop("checked",true)selectAllLabel.hide()deselectAllLabel.show()}else{selectAll.prop("checked",false)selectAllLabel.show()deselectAllLabel.hide()}}langs.change(select)})