javascript - not - 使用jQuery設置“已選中”複選框?
jquery radio checked (20)
jQuery 1.6+
使用新的.prop()
方法:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 1.5.x及以下版本
.prop()
方法不可用,因此您需要使用.attr()
。
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
請注意,這是jQuery在1.6版之前的單元測試所使用的方法,並且優於使用
$('.myCheckbox').removeAttr('checked');
因為後者將在最初檢查該框時,在包含它的任何表單上更改對.reset()
的調用行為 - 一個微妙但可能不受歡迎的行為更改。
有關更多上下文,可以在版本1.6發行說明和.prop()
的屬性與屬性部分中找到對從1.5.x過渡到1.6的已checked
屬性/屬性的處理更改的一些不完整的討論。 文件 。
任何版本的jQuery
如果您只使用一個元素,則可以隨時修改HTMLInputElement
的.checked
屬性:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用.prop()
和.attr()
方法而不是使用它的好處是它們將對所有匹配的元素進行操作。
我想做這樣的事情來使用jQuery勾選一個checkbox
:
$(".myCheckBox").checked(true);
要么
$(".myCheckBox").selected(true);
這樣的事情存在嗎?
這是使用jQuery 的完整答案
我測試它,它100%工作:D
// when the button (select_unit_button) is clicked it returns all the checed checkboxes values
$("#select_unit_button").on("click", function(e){
var arr = [];
$(':checkbox:checked').each(function(i){
arr[i] = $(this).val(); // u can get id or anything else
});
//console.log(arr); // u can test it using this in google chrome
});
以下是如何檢查多個複選框的代碼和演示...
http://jsfiddle.net/tamilmani/z8TTt/
$("#check").on("click", function () {
var chk = document.getElementById('check').checked;
var arr = document.getElementsByTagName("input");
if (chk) {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = true;
}
} else {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = false;
}
}
});
你可以做
$('.myCheckbox').attr('checked',true) //Standards compliant
要么
$("form #mycheckbox").attr('checked', true)
如果您要在觸發的複選框的onclick事件中有自定義代碼,請使用以下代碼:
$("#mycheckbox").click();
您可以通過完全刪除屬性取消選中:
$('.myCheckbox').removeAttr('checked')
您可以選中所有復選框,如下所示:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
假設問題是......
如何選中復選框設置BY VALUE?
請記住,在典型的複選框集中,所有輸入標記都具有相同的名稱, 它們因屬性value
而不同 :集合的每個輸入都沒有ID。
使用以下代碼行可以使用更具體的選擇器擴展Xian的答案:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
另一種可能的方案
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
如果使用移動設備並且您希望更新界面並將復選框顯示為未選中,請使用以下命令:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
如果您正在使用PhoneGap進行應用程序開發,並且您想要立即顯示按鈕的值,請記住這樣做
$('span.ui-[controlname]',$('[id]')).text("the value");
我發現沒有跨度,無論你做什麼,界面都不會更新。
您還可以使用新方法擴展$ .fn對象:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
然後你可以這樣做:
$(":checkbox").check();
$(":checkbox").uncheck();
或者,如果您使用其他使用這些名稱的庫,您可能希望為它們提供更多唯一的名稱,如mycheck()和myuncheck()。
我們可以使用帶有jQuery的elementObject
來檢查屬性:
$(objectElement).attr('checked');
我們可以將它用於所有jQuery版本而不會出現任何錯誤。
更新:Jquery 1.6+具有替換attr的新prop方法,例如:
$(objectElement).prop('checked');
我錯過了解決方案。 我將永遠使用:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
檢查和取消選中
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
當您選中復選框時;
$('.className').attr('checked', 'checked')
這可能還不夠。 你也應該調用下面的函數;
$('.className').prop('checked', 'true')
特別是當您刪除複選框選中的屬性時。
簡單的JavaScript非常簡單,開銷也少得多:
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
要選中您應該使用的複選框
$('.myCheckbox').attr('checked',true);
要么
$('.myCheckbox').attr('checked','checked');
要取消選中復選框,您應始終將其設置為false:
$('.myCheckbox').attr('checked',false);
如果你這樣做
$('.myCheckbox').removeAttr('checked')
它會一起刪除屬性,因此您將無法重置表單。
BAD DEMO jQuery 1.6 。 我認為這是破碎的。 對於1.6,我將發布一個新帖子。
新的工作演示jQuery 1.5.2適用於Chrome。
兩個演示都使用
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
試試這個:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
這可能是最簡單,最簡單的解決方案:
$(".myCheckBox")[0].checked = true;
要么
$(".myCheckBox")[0].checked = false;
更短的是:
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
這裡也是一個jsFiddle 。
這將選擇具有指定屬性的元素,其值包含給定的子字符串“ckbItem”:
$('input[name *= ckbItem]').prop('checked', true);
它將在其name屬性中選擇包含ckbItem的所有元素。
這是使用jQuery檢查和取消選中復選框的正確方法,因為它是跨平台標準,並允許表單重新發布。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
通過這樣做,您使用JavaScript標準來檢查和取消選中復選框,因此任何正確實現checkbox元素的“checked”屬性的瀏覽器都將完美地運行此代碼。 這應該是所有主流瀏覽器,但我無法測試以前的Internet Explorer 9。
問題 (jQuery 1.6):
用戶單擊複選框後,該複選框將停止響應“已檢查”屬性更改。
下面是一個複選框屬性在某人點擊了複選框後無法完成工作的示例(這種情況發生在Chrome中)。
解決方案:
通過在DOM元素上使用JavaScript的“checked”屬性,我們可以直接解決問題,而不是試圖操縱DOM來做我們想要它做的事情。
此插件將更改jQuery選擇的任何元素的checked屬性,並在所有情況下成功檢查和取消選中復選框。 因此,雖然這看起來像是一個過度承載的解決方案,但它會使您網站的用戶體驗更好,並有助於防止用戶受挫。
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
或者,如果您不想使用插件,則可以使用以下代碼段:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
最後一個將觸發複選框的click事件,其他人不會。 因此,如果您要觸發的複選框的onclick事件中有自定義代碼,請使用最後一個。