建站
咨詢
售后
建站咨詢
新聞中心
jquery checkbox 全選反選代碼只能執(zhí)行一遍，第二次就失敗
removeAttr參數(shù)只需要一個，removeAttr("checked")
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,中方企業(yè)網(wǎng)站建設,中方品牌網(wǎng)站建設,網(wǎng)站定制,中方網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,中方網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
不過建議替換成
$(".chooseall").click(function(){
if($(".chooseall").prop("checked")?==?true){
$("input[name='checkbox1']").prop("checked",?false);
console.log(1);
}else{
$("input[name='checkbox1']").prop("checked",?false);
console.log(2);
}
});
或者更簡潔的，
$(".chooseall").click(function(){
var?isChecked?=?$(this).prop("checked");
$("input[name='checkbox1']").prop("checked",?isChecked);
});
jquery 全選反選
//?改用prop
$("類名").prop("checked","checked");//全選
$("類名").removeAttr("checked");//取消全選
我的jquery復選框 全選/全不選/反選 功能為什么不正常啊
$('#checkAll').click(function(){
$(':checkbox').each(function(i,?el){//最好這樣。setAttribute有時候會有問題。
el.checked?=?true;
});
});
$('#checkNo').click(function(){
$(':checkbox').each(function(i,?el){
el.checked?=?false;
});
});
$('#checkReverse').click(function(){
$(':checkbox').each(function(){
var?flag=this.checked;
$(this).attr('checked',function(index,value){
return?!value;
});
});
});
如果你直接
$(':checkbox').attr('checked',true);
你會發(fā)現(xiàn)，其實你復選框上已經(jīng)顯示checked="checked"了。按道理是應該處于選中狀態(tài)的。
但實際上。你再調(diào)用
$(':checkbox')[0].checked;//會返回false
很奇怪吧。雖然從attr屬性上看，確實是checked的。但是dom元素的直接屬性上，卻返回false。
jquery的attr調(diào)用的是DOM的setAttribute方法。也就是說，
$el.setAttribute('checked', true);和$el.checked = true;是有可能在瀏覽器上處理不一致的。
最常規(guī)的方式總之最正確的。如果遇到兼容性的問題。就盡量采用DHTML中最通用的方式。
JQuery實現(xiàn)列表中復選框全選反選功能封裝(推薦)
我們在做列表的時候經(jīng)常會遇到全選，反選進行批量處理問題，例如：
我當時就是簡單的實現(xiàn)了，然后想封裝到公共的js中，封裝的太爛，不好意思貼出來了（就是把實現(xiàn)代碼之間放到公共js中，然后每個頁面都用固定的id,class,現(xiàn)在想想我都不好意思叫他封裝了），然后想到之前老大有寫過這個功能去看下他怎么寫的，真是沒有對比就沒有傷害啊，這才叫封裝；
$(':checkbox[data-check-target]').click(function
()
{
var
target
=
$(this).attr('data-check-target');
if
($(this).prop('checked'))
{
$(target).prop('checked',
true);
}
else
{
$(target).prop('checked',
false);
}
});
首先這兒的高封裝性就體現(xiàn)出來了，只有一個自定義的data-check-target屬性用于js和html分離后的連接橋梁（而我當時用兩個：一個全選復選框，一個子復選框，有關(guān)的點都用上了，這樣就沒起到封裝的效果，js和html耦合性太大）（我看到上面的js就在想怎么通過一個連接點把三個相關(guān)聯(lián)的東西聯(lián)系起來的呢）；
接下來我們繼續(xù)看具體使用的地方：
我發(fā)現(xiàn)全選復選框用于和js鏈接的橋梁的自定義屬性data-check-target有點特別：
input
type="checkbox"
data-check-target=".id-checkbox"
/
它的值為“.id-checkbox”，看起來就感覺好奇怪，繼續(xù)往下看子復選框?qū)崿F(xiàn)：
input
type="checkbox"
name="ids[]"
value="@item.Id"
class="id-checkbox"
/
到這兒才豁然開朗原來子復選框的class名稱就存放在自定義屬性data-check-target中；
var
target
=
$(this).attr('data-check-target');
然后再通過自定義屬性data-check-target拿到子復選框的class，從而達到高封裝性；
我總結(jié)的就是js和html通過了自定義屬性data-check-target通信，子復選框依賴全選復選框自定義屬性data-check-target的值；
這個例子看下來代碼不難，也沒有什么地方很難理解的，就是通過一個自定義屬性巧妙的完成了低耦合的封裝，這也是正是這段代碼的難點和精髓；
我真心抑制不住內(nèi)心的崇拜，這幾行代碼太漂亮了。
PS：上面js為什么用prop而不用attr，因為：如果當前input中初始化未定義checked屬性，則該元素沒有指定的checked屬性，所以.attr()會返回undefined；
對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
以上所述是小編給大家介紹的JQuery實現(xiàn)列表中復選框全選反選功能封裝(推薦)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
網(wǎng)頁題目：jquery全選反選,jquery實現(xiàn)全選和取消全選
本文網(wǎng)址：http://www.dlmjj.cn/article/dsgssdh.html
