首頁 > web前端 > js教程 > 主體

jquery attr處理checkbox / select 等表單元素時的問題

巴扎黑
發布: 2017-06-26 14:23:26
原創
1475 人瀏覽過

先上html結構

<body><form action=""><input type="checkbox" id="checkedAll">全选/全不选<br><input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="蓝球">蓝球<input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="乒乓球">乒乓球<br><input type="button" id="send" value="提交"></form></body>
登入後複製

 如圖,這是前端進階經典書籍【尖銳的jquery】中的一個案例,使用attr方法為元素添加屬性以達到選中與取消效果。

要求:1. 點選全選/全部選,改變下方四個複選框選取狀態;

        2. 單獨點選下方按鈕,只要存在未選取的,上方全選/全不選為未選中狀態,全部選中,則上方全選/全不選也自動變成選取狀態。

 

<script>"#checkedAll").on("click",
登入後複製
        // 判断点击后this.checked的结果,默认未选中即为false,第一次点击则为true,第二次为false,再赋值给下面的input(此处逻辑与书上稍有不同)
        // 注意事项: 使用attr给表单元素设置选中状态时,第二个参数一定要是布尔值true/false,不能习惯性写成带引号,那就是字符串了。
登入後複製
        if(this.checked){
            $("input[name=items]").attr("checked",true); 
        }else{
            $("input[name=items]").attr("checked",false);
        }
    })</script>
登入後複製

 運行起來似乎沒問題,但當多次點擊之後會發現,屬性可以添加上去,但選中狀態並沒有改變。

what's wrong?

這就要歸宿到jQuery的版本問題了,在1.6之後,對於元素固有的屬性,應該使用 <strong>prop()</strong> 方法。

<script>$("#checkedAll").on("click",function(){
        console.log(!this.checked);if(this.checked){
            $("input[name=items]").prop("checked",true);
        }else{
            $("input[name=items]").prop("checked",false);
        }
    })</script>
登入後複製

以上程式碼還可以精簡為

<script>$("#checkedAll").on("click",function(){
        $("input").prop("checked",this.checked);
    })</script>
登入後複製

 

以上是jquery attr處理checkbox / select 等表單元素時的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板