input標(biāo)簽checkbox,change和click綁定事件的區(qū)別

我們經(jīng)常在vue開發(fā)項目的過程中，遇到需要對input框使用v-modal的這種情況，在有的時候，不光需要雙向數(shù)據(jù)綁定，還需要在改變數(shù)據(jù)之后綁定其它的操作，那么問題來了，你是使用@change綁定事件還是使用@click綁定事件

建議不要通過click綁定事件，對待input標(biāo)簽，最好通過change來觸發(fā)，本人血的教訓(xùn)。

<input @change="inputchecked" class="goods-checked"?
v-model="shopcargoods[index].checked" type="checkbox" >

click執(zhí)行的時間要早于change執(zhí)行的時間，因為v-modal的時間是一個異步的。

當(dāng)點擊之后，v-modal可能還沒有來得及將綁定在data里面的數(shù)據(jù)改變，click綁定的事件就執(zhí)行了，這會導(dǎo)致click綁定事件里面拿到的data數(shù)據(jù)不是最新的。

change綁定的事件是一定要等到input框的value值改變之后才會被觸發(fā)。

關(guān)于這一系列的順序我是這樣理解

點擊input框–> click事件生效 --> v-modal改變綁定的data數(shù)據(jù) --> 渲染到頁面上改變input的value值 --> change事件生效

input標(biāo)簽中checkbox類型的相關(guān)操作總結(jié)

今天突然用到了input標(biāo)簽里的checkbox，發(fā)現(xiàn)還是有些概念不清不楚的，在這里總結(jié)一下。

一、checked屬性

常用于input標(biāo)簽里type類型為checkbox和radio ，是一個Boolean屬性。規(guī)定在頁面加載時預(yù)先被選定?？梢酝ㄟ^js代碼進行設(shè)置。

	<input type="checkbox" name="hu" checked="checked">
	<input type="checkbox" name="hu" checked=true>
	<input type="checkbox" name="hu" checked=false>
	<input type="checkbox" name="hu" checked="">
	<input type="checkbox" name="hu" checked>

以上的幾種寫法，都會得到相同的結(jié)果，就是標(biāo)簽被選中。  

這是因為在復(fù)選框里只要有checked屬性，不管是夠為其賦值，結(jié)果為空或true或false或任意值，均為選中狀態(tài)。

需要注意的是，在XHTML中禁止屬性最小化，所以必須定義為

<input type="checkbox"  checked="checked">

二、操作

可以利用JS或Jquery操作checked的值：

var js_box1 = document.getElementById("box1").checked = true;

$("#box2").prop('checked',true);           // 標(biāo)準(zhǔn)寫法 推薦
$("#box2").prop({checked: true});          // map鍵值對
$("#box2").prop('checked',function(){      // 通用寫法
    return true;
}); 
$("#cb1").prop("checked","checked");        //不標(biāo)準(zhǔn)
 
$("#box2").attr('checked',true);           // 不推薦
$("#box2").attr('checked','true');         // 不推薦
$("#box2").attr('checked','checked');      // 通用寫法
 
console.log('1:'+ box1.checked); // 1:undefind

在我使用的過程來看，強烈推薦使用.prop()方法進行設(shè)置或判斷是否選中的操作。（當(dāng)然這是jQuery里的方法）

因為在我開始想到的是用attr()方法，然后踩坑里了.......用attr()設(shè)置復(fù)選框選中沒有問題，問題出現(xiàn)在判斷是否選中復(fù)選框。不管我選中還是沒有選中，返回的都是“undefind”。之后還用prop()就美滋滋。

console.log('1:'+ box1.checked);  //1:true
console.log('2:'+ $("#box2").attr('checked'));  //2:checked
 
$(document).on('click', '#box3', function(){
    console.log('3:'+ $("#box3").attr('checked'));  //3:undefined
});
 
$(document).on('click', '#box4', function(){
    console.log('4:'+ $("#box4").prop('checked'));  //4:checked
});

后來自己又研究了一下，發(fā)現(xiàn)如果不需要實時的監(jiān)聽是否選中復(fù)選框的話，attr()和prop()都能得到結(jié)果，且attr返回:"checked"或"undefined"，prop 返回true/false。因為在我所使用的項目中，需要用戶點擊復(fù)選框選中以后，標(biāo)簽欄就需要立刻做出反應(yīng)，將對應(yīng)的內(nèi)容生成新標(biāo)簽回顯給用戶。這時候使用attr('checked')在點擊事件下獲得checked屬性，就會一直返回undefind。具體原因在后面會有解釋，換成prop方法就不會出現(xiàn)這個問題。

還有一種方式也可以，就是   .is(':checked')  // 返回true/false

補充一下，關(guān)于prop和attr方法的區(qū)別：

1.設(shè)置的屬性值類型不同

由于attr()函數(shù)操作的是文檔節(jié)點的屬性，因此設(shè)置的屬性值只能是字符串類型，如果不是字符串類型，也會調(diào)用其toString()方法，將其轉(zhuǎn)為字符串類型。

prop()函數(shù)操作的是JS對象的屬性，因此設(shè)置的屬性值可以為包括數(shù)組和對象在內(nèi)的任意類型。

2.jQuery認(rèn)為：attribute的checked、selected、disabled就是表示該屬性初始狀態(tài)的值，property的checked、selected、disabled才表示該屬性實時狀態(tài)的值(值為true或false)。

 即：

• attr() 獲取的是初始狀態(tài)的值，即使取消了選中，也不會改變。
• prop() 獲取的值已經(jīng)發(fā)生變化，是實時狀態(tài)的值。（這就是我上面出問題的原因啦）

三、關(guān)于checkbox的其他操作

1、設(shè)置第一個checkbox 為選中值

$("#chk1").find('input:checkbox:first').prop("checked",true);
$("#chk1").find('input:checkbox').eq(0).prop("checked",true);

2、設(shè)置最后一個checkbox為選中值

$("#chk1").find('input:checkbox:last').prop("checked",true);

3、根據(jù)索引值設(shè)置任意一個checkbox為選中值

$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true); ?//索引值=0,1,2....?
//或者
$("#chk1").find('input:checkbox').slice(0,2).prop('checked', true); //同時選中第0個和第1個checkbox
//從索引0開始（包含），到索引2（不包含）的checkbox

4、根據(jù)value值設(shè)置checkbox為選中值

$("#chk1").find("input:checkbox[value='1']").prop('checked',true);
$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);

5、刪除checkbox：①刪除value=1的checkbox ②刪除第幾個checkbox

$("#chk1").find("input:checkbox[value='1']").remove(); //將匹配元素從DOM中刪除，將標(biāo)簽從頁面上刪除了
$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....
?
//如刪除第3個checkbox:
?
$("#chk1").find("input:checkbox").eq(2).remove();

6、選中所有奇數(shù)項或偶數(shù)項

$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中所有偶數(shù)?
$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中所有奇數(shù)?

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論