使用prop解決一個checkbox選中后再次選中失效的問題
更新時間:2017年07月05日 09:06:54 投稿:jingxian
下面小編就為大家?guī)硪黄褂胮rop解決一個checkbox選中后再次選中失效的問題。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
//問題點
初始狀態(tài)復選框沒有全選,
點擊全選按鈕調用checkAll方法,
實現了全選,
然后點擊全不選按鈕,
實現了全不選,
然后再次點擊全選按鈕,
結果卻木有全選,
再反復點擊木有任何反應。
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { $("#allchoose").click(function () { $(":checkbox").prop("checked",true); }) $("#allnochoose").click(function () { if ($(":checkbox").is(":checked")){ $(":checkbox").attr("checked",false); } }) $("#choose").click(function () { if($(":checkbox").is(":checked")){ $(":checkbox").attr("checked",false); }else{ $(":checkbox").prop("checked",true); } }) }) </script> </head> <body> <input type="checkbox" name="checkbox" id="">乒乓球 <input type="checkbox" name="checkbox" id="">羽毛球 <input type="checkbox" name="checkbox" id="">足球 <input type="checkbox" name="checkbox" id="">籃球 <input type="checkbox" name="checkbox" id="">排球<br> <input type="button" value="全選" id="allchoose"> <input type="button" value="全不選" id="allnochoose"> <input type="button" value="反選" id="choose"> <input type="submit" value="提交" id="submit"> </body> </html>
以上這篇使用prop解決一個checkbox選中后再次選中失效的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
jQuery事件綁定用法詳解(附bind和live的區(qū)別)
這篇文章主要介紹了jQuery事件綁定用法,結合實例形式較為詳細的分析了jQuery事件綁定的實現原理與相關注意事項,并附帶了相關綁定方法的使用說明,重點介紹了bind和live的區(qū)別,需要的朋友可以參考下2016-01-01