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中)。

Fiddle

解決方案:

通過在DOM元素上使用JavaScript的“checked”屬性,我們可以直接解決問題,而不是試圖操縱DOM來做我們想要它做的事情。

Fiddle

此插件將更改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事件中有自定義代碼,請使用最後一個。





checked