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

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

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

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

click執(zhí)行的時(shí)間要早于change執(zhí)行的時(shí)間，因?yàn)関-modal的時(shí)間是一個(gè)異步的。

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

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

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

點(diǎn)擊input框–> click事件生效 --> v-modal改變綁定的data數(shù)據(jù) --> 渲染到頁(yè)面上改變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 ，是一個(gè)Boolean屬性。規(guī)定在頁(yè)面加載時(shí)預(yù)先被選定?？梢酝ㄟ^(guò)js代碼進(jìn)行設(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>

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

這是因?yàn)樵趶?fù)選框里只要有checked屬性，不管是夠?yàn)槠滟x值，結(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鍵值對(duì)
$("#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

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

因?yàn)樵谖议_(kāi)始想到的是用attr()方法，然后踩坑里了.......用attr()設(shè)置復(fù)選框選中沒(méi)有問(wèn)題，問(wèn)題出現(xiàn)在判斷是否選中復(fù)選框。不管我選中還是沒(méi)有選中，返回的都是“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
});

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

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

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

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

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

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

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

 即：

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

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

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

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

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

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

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

$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true); ?//索引值=0,1,2....?
//或者
$("#chk1").find('input:checkbox').slice(0,2).prop('checked', true); //同時(shí)選中第0個(gè)和第1個(gè)checkbox
//從索引0開(kāi)始（包含），到索引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 ②刪除第幾個(gè)checkbox

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

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

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

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

最新評(píng)論