javascript - 使用 jQuery 檢查勾選框是否被選取

我如何使用複選框陣列的 ID 來檢查複選框陣列中的某個複選框是否被選中？

我正在使用以下程式碼，但它總是返回已勾選核取方塊的數量，而不管 id 為何。

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

答案＃1

$('#' + id).is(":checked")

如果勾選了該選框，則會得到此結果。

對於具有相同名稱的複選框陣列，你可以通過以下方式獲取已勾選的項目列表：

var $boxes = $('input[name=thename]:checked');

然後要遍歷它們並查看哪些被選中，你可以這樣做：

$boxes.each(function(){
    // Do stuff here with this
});

要找出有多少被選中，你可以這樣做：

$boxes.length;

答案＃2

在您的文件中，ID 必須是唯一的，這意味著您 不應該這樣做：

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

相反，刪掉 ID，然後按名稱或包含的元素來選取它們：

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

現在來看 jQuery：

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

答案＃3

$('#checkbox').is(':checked'); 

上述程式碼如果核取方塊被選取則返回 true，如果未選取則返回 false。

答案＃4

以下所有方法都是有用的：

$('#checkbox').is(":checked")

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

建議避免使用 DOM 元素或內聯的 "this.checked"，而應使用 jQuery 的 on 方法作為事件監聽器。

答案＃5

jQuery 代碼用來檢查複選框是否被選中：

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

或者：

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

答案＃6

關於 checked 屬性最重要的概念是，它並不對應於 checked 屬性。這個屬性實際上對應於 defaultChecked 屬性，應該只用來設置複選框的初始值。checked 屬性的值不會隨複選框的狀態而改變，而 checked 屬性會。因此，跨瀏覽器兼容的判斷複選框是否被選中的方法是使用屬性。

以下所有方法都是可能的

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

答案＃7

這也是我經常使用的一個想法：

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

如果被選中，將返回 1；否則將返回 0。

答案＃8

你可以使用這個代碼，

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

答案＃9

根據 jQuery 文檔，有以下幾種方法可以檢查複選框是否被選中。讓我們以一個複選框為例（查看包含所有示例的 jsfiddle 工作效果）

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

範例 1 - 已勾選

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

範例 2 - 使用 jQuery，注意 - :checked

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

範例 3 - 使用 jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

查看可用的 jsfiddle

答案＃10

我知道原作者想要的是 jQuery，但在我的情況下，純 JS 才是答案，所以如果有人像我一樣在這裡，又沒有 jQuery 或不想使用它——這裡是 JS 的答案：

document.getElementById("myCheck").checked

如果 ID 為 myCheck 的輸入已被選取則回傳 true，否則回傳 false。

就這麼簡單。

答案＃11

你可以試試這個：

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />

答案＃12

你可以使用 jQuery 推薦的以下任何代碼。

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};

答案＃13

$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

上面的程式碼也適用於 Bootstrap 模態框。isChecked 為 true 或 false；

答案＃14

你可以這樣簡單地做；

可運作的小提琴

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

甚至更簡單；

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

如果 checkbox 被勾選，它將返回 true，否則返回 undefined

答案＃15

試試這個…

$(function(){
  $('body').on('click','.checkbox',function(e){
    
    if($(this).is(':checked')){
      console.log('Checked')
    } else {
      console.log('Unchecked')
    }
  })
})

答案＃16

只是說在我的例子中，情況是一個對話框，然後在關閉對話框之前驗證了核取方塊。以上都不是，以及如何在 jQuery 中檢查核取方塊是否被勾選？而 jQuery 中如果核取方塊被勾選的寫法似乎也不起作用。

最終

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

這個方法有效，所以先呼叫類別再呼叫 ID，而不是只呼叫 ID。這可能是由於此頁面上嵌套的 DOM 元素導致的問題。上面提供了解決方法。