jQuery複選框選中/取消選中

什麼是正確的方式來檢查/取消選中放置在觸發我的功能的元素內的複選框？jQuery複選框選中/取消選中

這裏是我的代碼：

<table id="news_list"> 
<tr> 
    <td><input type="checkbox" name="news[1]" /></td> 
    <td>TEXT</td> 
</tr></table> 

$("#news_list tr").click(function() { 
    var ele = $(this).find('input'); 
    if(ele.is(':checked')){ 
     ele.removeAttr('checked'); 
     $(this).removeClass('admin_checked'); 
    }else{ 
     ele.attr('checked', 'checked'); 
     $(this).addClass('admin_checked'); 
    } 
});

的問題是，我可以檢查，並取消每盒只有一次。在我選中並取消選中後，它仍然會添加/刪除類，但從不再檢查一個框（即使點擊複選框而不是表格行）。

我試過使用.bind（'click'）觸發器，但它是相同的結果。

任何解決方案？

來源

2013-02-08 user1587985

望着答案，我不敢肯定他們給解決你正在嘗試做的。我不明白爲什麼基本上禁用複選框是有意義的，這就是那些給出的答案正在做的事情（因爲當你點擊複選框時它會被檢查，這意味着if語句會立即取消選中它......這意味着你通過點擊實際的複選框......對不對？）。這是你想要做什麼？：http://jsfiddle.net/7gbhf/ – Joonas

@Joonas謝謝，這正是我需要的！ Jai的答案確實適用於signle行，不適用於多個 – user1587985

好。有一件事。如果我的jsfiddle正是你所需要的，我不確定我看到Jai的答案是如何工作的。它不會讓您通過單擊複選框來檢查複選框，這是由於if語句導致的，如上所述。所以我認爲你錯過了那部分，或者...我仍然不知道你想要什麼:) – Joonas

使用.prop()代替，如果我們與您的代碼，然後去比較是這樣的：

看一下例子jsbin：

$("#news_list tr").click(function() { 
    var ele = $(this).find(':checkbox'); 
    if ($(':checked').length) { 
     ele.prop('checked', false); 
     $(this).removeClass('admin_checked'); 
    } else { 
     ele.prop('checked', true); 
     $(this).addClass('admin_checked'); 
    } 
});

變化：

將input更改爲:checkbox。
比較的checked checkboxes。

來源

2013-02-08 10:03:13 Jai

'prop'沒有爲我工作，但'removeAttr'和'attr'做了，使用jQuery 1.9.1。 – machineaddict

謝謝，道具已經爲我解決了一個不同的問題，所以發現這條信息非常有用。 –

@NickLewis歡迎您。 – Jai

使用prop（）代替attr（）來設置值checked。也可以在查找方法中使用:checkbox而不是input並具體說明。

Live Demo

$("#news_list tr").click(function() { 
    var ele = $(this).find('input'); 
    if(ele.is(':checked')){ 
     ele.prop('checked', false); 
     $(this).removeClass('admin_checked'); 
    }else{ 
     ele.prop('checked', true); 
     $(this).addClass('admin_checked'); 
    } 
});

Use prop instead of attr for properties like checked

在jQuery 1.6的，所述.attr（）方法返回未定義對於尚未被設置的屬性。要檢索和修改DOM屬性，如的檢查，選擇，或禁用表單元素的狀態，使用 .prop（）方法

來源

2013-02-08 09:30:03 Adil

http://api.jquery.com/checkbox-selector/因爲：checkbox是一個jQuery擴展，而不是作爲CSS規範的一部分，使用：checkbox的查詢無法利用本機DOM querySelectorAll（）方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type =「checkbox」]。 –

工程很好）謝謝 – rusllonrails

其實這是正確的解決方案。接受的答案有一些問題。感謝您的解決方案。 – Manik

$('mainCheckBox').click(function(){ 
    if($(this).prop('checked')){ 
     $('theControledCheckBoxes').prop('checked', true); 
    }else{ 
     $('theControledCheckBoxes').prop('checked', false); 
    } 
});

來源

2013-07-16 02:14:13 mahmoh

jQuery複選框選中/取消選中

回答

相關問題