把複選框變成單選框(prop,attr的區別)

若是項目中須要統同樣式的話,有可能會遇到把複選框變成單選框的需求.

下面是用jquery的簡單實現

$(function(){
    $("input[type='checkbox']").click(function() {
        var flag = $(this).prop("checked"); //先記錄下點擊後應該的狀態
        $("input[type='checkbox']").prop("checked", false);
        $(this).prop("checked", flag);
    });
});

這裏有兩個技巧:

1.每次點擊事件中都把全部複選框都設置爲false,這樣能夠保證單選.

2.在複選框置爲false以前,記錄下當前複選框點擊後應該處於的狀態,在複選框置爲false以後,恢復該狀態.這樣能夠保證複選框點擊的正確.

這裏有個jQuery的問題,在涉及到獲取標籤的屬性是false或者true時,如checkbox的checked屬性,若是jquery版本是1.6以上,就用prop,這樣取得的屬性值必定是true或false,若是用attr可能false會變成undefined,其餘狀況就仍是用attr.