使用prop解決一個checkbox選中后再次選中失效的問題
更新時間：2017年07月05日 09:06:54 投稿：jingxian
下面小編就為大家?guī)硪黄褂胮rop解決一個checkbox選中后再次選中失效的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
//問題點
初始狀態(tài)復(fù)選框沒有全選，
點擊全選按鈕調(diào)用checkAll方法，
實現(xiàn)了全選，
然后點擊全不選按鈕，
實現(xiàn)了全不選，
然后再次點擊全選按鈕，
結(jié)果卻木有全選，
再反復(fù)點擊木有任何反應(yīng)。
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選中后再次選中失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家詳細介紹了jQuery.each使用方法及源碼分析的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery實現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)導(dǎo)航高亮的方法,涉及針對鼠標事件的相應(yīng)及頁面元素屬性動態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11
通過jquery獲取上傳文件名稱、類型和大小的實現(xiàn)代碼
這篇文章主要介紹了在文件上傳到服務(wù)器之前，我們可以通過jquery來獲取上傳文件的名稱，類型和尺寸大小,需要的朋友可以參考下2018-04-04
jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live
這篇文章主要介紹了jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live 的相關(guān)資料,非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習吧2016-06-06
jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
實現(xiàn)彈出遮罩層的方法有很多種，接下來本文給大家介紹通過jquery操作dom實現(xiàn)彈出頁面遮罩層以及web端和移動阻止遮罩層的滑動，對頁面彈出遮罩層的相關(guān)知識感興趣的朋友一起看看吧2016-08-08
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過 HTTP 請求加載遠程數(shù)據(jù)，文中通過示例代碼詳細的介紹了$.ajax()的用法，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-05-05
這篇文章主要介紹了jquery如何獲取元素的滾動條高度等實現(xiàn)代碼,需要的朋友可以參考下2015-10-10
jquery實現(xiàn)ajax提交form表單的方法總結(jié)
本篇文章主要是對jquery實現(xiàn)ajax提交form表單的方法進行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家詳細介紹了jQuery樹控件zTree使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery實現(xiàn)圣誕節(jié)禮物動畫案例解析
這篇文章主要介紹了jQuery實現(xiàn)圣誕節(jié)禮物動畫案例解析的相關(guān)資料,需要的朋友可以參考下2016-12-12