使用jquery檢查/取消選中複選框？

418

我已經在我的網頁一些輸入文本字段，我顯示使用JavaScript SETVAL功能來編輯自己的價值觀，我增加了一個額外的複選框字段，我通過一個值，使用jquery檢查/取消選中複選框？

在這裏，我要檢查，如果value == 1，然後這個複選框應該檢查，否則不選中，

我這樣做使用兩個div，但我不舒服，有沒有其他解決方案？

if(value == 1) { 
    $('#uncheck').hide(); 
    $('#check').show(); 
} else{ 
    $('#uncheck').show(); 
    $('#check').hide(); 
}

來源

2013-07-02 Irfan Ahmed

917

的jQuery 1.6+：

.attr()已被棄用用於性能;使用新的.prop()函數，而不是爲：

$('#myCheckbox').prop('checked', true); // Checks it 
$('#myCheckbox').prop('checked', false); // Unchecks it

jQuery的< 1.6：

要檢查/取消選中複選框，使用屬性checked並改變這一點。使用jQuery你可以做：

$('#myCheckbox').attr('checked', true); // Checks it 
$('#myCheckbox').attr('checked', false); // Unchecks it

因爲你知道，在HTML中，它看起來是這樣的：

<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked --> 
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->

但是，你不能相信.attr（）方法得到的值複選框（如果你需要的話）。您將不得不依靠.prop()方法。

來源

2013-07-02 08:12:23 Eric

+40

一個元件被認爲'checked'，只要它具有即使它沒有值，或者值是'假'等等，也可以檢查'checked'的屬性。所以'$（'＃myCheckbox'）。attr（'checked'，false）;'不會取消選中，您需要'$（'＃myCheckbox'）。removeAttr（'checked'）;'。 – xpy

@xpy'.attr（「checked」，false）;'在我的瀏覽器中有效。 –

@DanielCook'.attr（「checked」，false）;'在我的Firefox開發者版v41.0a2中有效，但它不在正常的Firefox v39和我的Chrome v43上。 – xpy

您可以設置複選框的基於價值的狀態：

$('#your-checkbox').prop('checked', value == 1);

來源

2013-07-02 08:13:46 billyonecan

這對我不起作用，價值沒有定義。 – Dave

您可以使用prop()對於這一點，因爲的jQuery 1.6之前，.attr()方法有時把屬性值考慮檢索某些時候屬性，這可能會導致不一致的行爲。 從jQuery 1.6開始，.prop()方法提供了顯式檢索屬性值的方法，而.attr()檢索屬性。

var prop=false; 
if(value == 1) { 
    prop=true; 
} 
$('#checkbox').prop('checked',prop);

或簡單地，

$('#checkbox').prop('checked',(value == 1));

片段

$(document).ready(function() { 
 
    var chkbox = $('.customcheckbox'); 
 
    $(".customvalue").keyup(function() { 
 
    chkbox.prop('checked', this.value==1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>This is a domo to show check box is checked 
 
if you enter value 1 else check box will be unchecked </h4> 
 
Enter a value: 
 
<input type="text" value="" class="customvalue"> 
 
<br>checkbox output : 
 
<input type="checkbox" class="customcheckbox">

來源

2013-07-02 08:13:59

使用jquery檢查/取消選中複選框？

回答

相關問題