使用 jQuery 檢查復選框是否被選中

Question

如何使用復選框數組的 id 檢查復選框數組中的復選框是否被選中？

我正在使用以下代碼，但它總是返回選中復選框的計數，而不管 id。

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

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

Answer 1

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

如果復選框被選中，那會得到。

對於具有相同名稱的復選框數組，您可以通過以下方式獲取選中的列表：

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

然后遍歷它們並查看檢查的內容，您可以執行以下操作：

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

要查找檢查了多少，您可以執行以下操作：

$boxes.length;

Answer 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;

Answer 3

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

如果復選框被選中，上面的代碼返回真，否則返回假。

Answer 4

以下所有方法都很有用：

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

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

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

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

建議應避免使用 DOMelement 或內聯“this.checked”，而應使用 jQuery on 方法作為事件偵聽器。

Answer 5

檢查復選框是否被選中的jQuery代碼：

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

或者：

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

Answer 6

關於checked 屬性要記住的最重要的概念是它不對應於checked 屬性。 該屬性實際上對應於 defaultChecked 屬性，應該僅用於設置復選框的初始值。 選中的屬性值不會隨着復選框的狀態而改變，而選中的屬性會。 因此，確定復選框是否被選中的跨瀏覽器兼容的方法是使用屬性

以下所有方法都是可能的

elem.checked 

$(elem).prop("checked") 

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

Answer 7

您可以使用此代碼，

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

Answer 8

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

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

如果檢查，它將返回 1； 否則它會返回0。

Answer 9

根據 jQuery文檔，有以下方法可以檢查復選框是否被選中。 例如，讓我們考慮一個復選框（Check Working jsfiddle with all examples）

<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 道具

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

檢查工作jsfiddle

Answer 10

你可以試試這個：

<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" />

Answer 11

我知道 OP 想要 jquery，但在我的情況下，純 JS 是答案，所以如果像我這樣的人在這里並且沒有 jquery 或不想使用它 - 這是 JS 答案：

document.getElementById("myCheck").checked

如果檢查了 ID 為 myCheck 的輸入，則返回 true，如果未檢查，則返回 false。

就那么簡單。

Answer 12

您可以使用 jquery 推薦的以下任何代碼。

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

Answer 13

你可以簡單地這樣做；

工作小提琴

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

Answer 14

用於檢查和設置復選框的簡單演示。

小提琴！

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});

Answer 15

只是在我的例子中說情況是一個對話框，然后在關閉對話框之前驗證復選框。 以上都不是以及如何檢查是否在 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 元素導致了問題。 解決方法如上。

Answer 16

對於帶有 id 的復選框

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

你可以簡單地做

$("#id_input_checkbox13").prop('checked')

您將得到true或false作為上述語法的返回值。 您可以在 if 子句中將其用作普通布爾表達式。

Answer 17

這樣的事情可以幫助

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}

Answer 18

實際上，根據jsperf.com ，DOM 操作最快，然后是 $().prop() 然后是 $().is() ！！

以下是語法：

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

我個人更喜歡.prop() 。 與.is()不同，它還可以用於設置值。

Answer 19

切換復選框已選中

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})

Answer 20

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

上面的這段代碼也適用於引導模式。 isChecked 為 true 或 flase ；

Answer 21

使用此代碼，您可以檢查至少一個復選框是否在不同的復選框組或多個復選框中被選中。 使用此功能，您無需刪除 ID 或動態 ID。 此代碼使用相同的 ID。

參考鏈接

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

Answer 22

由於是 2019 年年中，jQuery 有時會落后於 VueJS、React 等。這是一個純粹的 vanilla Javascript onload 偵聽器選項：

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>

Answer 23

您的問題不清楚：您想在輸入時提供“復選框數組 id”並在輸出時獲得true/false - 這樣您將不知道選中了哪個復選框（正如您的函數名稱所暗示的那樣）。 所以下面是我對你的isCheckedById主體的提議，它在輸入時取復選框id ，在輸出時返回true/false （這很簡單，但你的 ID 不應該是關鍵字），

this[id].checked

 function isCheckedById(id) { return this[id].checked; } // TEST function check() { console.clear() console.log('1',isCheckedById("myCheckbox1")); console.log('2',isCheckedById("myCheckbox2")); console.log('3',isCheckedById("myCheckbox3")); }

 <label><input id="myCheckbox1" type="checkbox">check 1</label> <label><input id="myCheckbox2" type="checkbox">check 2</label> <label><input id="myCheckbox3" type="checkbox">check 3</label> <!-- label around inputs makes text clickable --> <br> <button onclick="check()">show checked</button>

Answer 24

如何使用復選框數組的 id 檢查復選框數組中的復選框是否被選中？

我正在使用以下代碼，但它始終返回選中復選框的計數，而不管 id。

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

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

Answer 25

嘗試這個...

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

Answer 26

您可以嘗試任何首選方式，如jQuery或JavaScript 。

獲取如下值並分配給變量，然后根據您的要求使用if-else語句。

var getVal=$('#checkbox_id').is(":checked"); // jQuery

var getVal=document.getElementById("checkbox_id").checked //JavaScript

if (getVal==true) {
 // perform task
} else {
 // perform task 
}

Answer 27

使用下面的代碼

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>