Kiểm tra nếu hộp kiểm được kiểm tra với jQuery

Làm cách nào để kiểm tra xem hộp kiểm trong mảng hộp kiểm có được kiểm tra bằng id của mảng hộp kiểm không?

Tôi đang sử dụng đoạn mã sau, nhưng nó luôn trả về số lượng hộp kiểm đã chọn bất kể id.

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

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

ID phải là duy nhất trong tài liệu của bạn, nghĩa là bạn không nên làm điều này:

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

Thay vào đó, bỏ ID, sau đó chọn chúng theo tên hoặc theo thành phần có chứa:

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

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

Và bây giờ là 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;

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

Điều đó nhận được nếu hộp kiểm được chọn.

Đối với một loạt các hộp kiểm có cùng tên, bạn có thể lấy danh sách các hộp kiểm tra bằng cách:

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

Sau đó, lặp lại chúng và xem những gì bạn đã kiểm tra:

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

Để tìm xem có bao nhiêu được kiểm tra, bạn có thể làm:

$boxes.length;

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

Đoạn mã trên trả về true nếu hộp kiểm được chọn hoặc sai nếu không.

Tất cả các phương pháp sau đều hữu ích:

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

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

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

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

Nên tránh sử dụng DOMelement hoặc nội tuyến "this.checked" thay vào đó nên sử dụng jQuery trên phương thức sự kiện.

Mã jQuery để kiểm tra xem hộp kiểm có được kiểm tra hay không:

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

Cách khác:

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

Khái niệm quan trọng nhất cần nhớ về thuộc tính được kiểm tra là nó không tương ứng với thuộc tính được kiểm tra. Thuộc tính thực sự tương ứng với thuộc tính defaultChecked và chỉ được sử dụng để đặt giá trị ban đầu của hộp kiểm. Giá trị thuộc tính được kiểm tra không thay đổi theo trạng thái của hộp kiểm, trong khi thuộc tính được kiểm tra thì không. Do đó, cách tương thích với nhiều trình duyệt để xác định xem hộp kiểm có được chọn hay không là sử dụng thuộc tính

Tất cả các phương pháp dưới đây là có thể

elem.checked 

$(elem).prop("checked") 

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

Bạn có thể sử dụng mã này,

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

Theo tài liệu jQuery, có các cách sau để kiểm tra xem hộp kiểm có được kiểm tra hay không. Hãy xem xét một hộp kiểm ví dụ (Kiểm tra jsfiddle làm việc với tất cả các ví dụ)

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

Ví dụ 1 - Có kiểm tra

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

Ví dụ 2 - Với jQuery là, LƯU Ý -: đã chọn

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

Ví dụ 3 - Với 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.");
    }
}); 

Kiểm tra jsfiddle làm việc

Bạn có thể thử điều này:

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

Bạn có thể sử dụng bất kỳ mã nào được đề xuất sau đây bởi jquery.

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

Tôi biết OP muốn jquery nhưng trong trường hợp của tôi, JS thuần túy là câu trả lời vì vậy nếu có ai như tôi ở đây và không có jquery hoặc không muốn sử dụng nó - đây là câu trả lời của JS:

document.getElementById("myCheck").checked

Nó trả về true nếu đầu vào có ID myCheck được chọn và false nếu không được chọn.

Đơn giản như thế.

Bạn có thể làm nó đơn giản như;

Fiddle làm việc

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');
        }
    });
});

hoặc thậm chí đơn giản hơn;

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

Nếu checkboxlà kiểm tra nó sẽ trở lại truebằng cách khácundefined

Đây cũng là một ý tưởng tôi sử dụng thường xuyên:

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

Nếu cheked, nó sẽ trả về 1; nếu không nó sẽ trả về 0.

Demo đơn giản để kiểm tra và thiết lập một hộp kiểm.

jsfiddle !

$('.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);
    }
});

Chỉ cần nói trong ví dụ của tôi, tình huống là một hộp thoại sau đó xác minh hộp kiểm trước khi đóng hộp thoại. Không có ở trên và Làm thế nào để kiểm tra xem hộp kiểm có được kiểm tra trong jQuery không? và jQuery nếu hộp kiểm được chọn cũng không hoạt động.

đến cuối cùng

<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');

Điều này làm việc để gọi lớp sau đó ID. thay vì chỉ ID. Có thể do các thành phần DOM lồng nhau trên trang này gây ra sự cố. Cách giải quyết đã ở trên.

Đối với hộp kiểm có id

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

bạn chỉ có thể làm

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

bạn sẽ nhận được truehoặc falselà giá trị trả về cho cú pháp trên. Bạn có thể sử dụng nó trong mệnh đề if như biểu thức boolean bình thường.

Một cái gì đó như thế này có thể giúp

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 );
        }
    }
}

Trên thực tế, theo jsperf.com , các hoạt động DOM là nhanh nhất, sau đó $ (). Prop () theo sau là $ (). Is () !!

Dưới đây là các cú pháp:

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!!');

Cá nhân tôi thích .prop(). Không giống như .is(), nó cũng có thể được sử dụng để đặt giá trị.

Chuyển đổi hộp kiểm đã chọn

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

Sử dụng mã này, bạn có thể kiểm tra ít nhất một hộp kiểm được chọn hay không trong các nhóm hộp kiểm khác nhau hoặc từ nhiều hộp kiểm. Sử dụng điều này, bạn không thể yêu cầu xóa ID hoặc ID động. Mã này hoạt động với cùng một ID.

Liên kết tham khảo

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

Vì vào giữa năm 2019 và jQuery đôi khi bị lạc hậu so với những thứ như VueJS, React, v.v ... Đây là một tùy chọn nghe nhạc tải vanilla Javascript thuần túy:

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

Câu hỏi của bạn không rõ ràng: bạn muốn đưa ra "id mảng hộp kiểm" ở đầu vào và nhận true/falseở đầu ra - theo cách này bạn sẽ không biết hộp kiểm nào đã được chọn (như tên hàm của bạn đề xuất). Vì vậy, bên dưới có đề xuất của tôi về phần thân của bạn isCheckedByIdtrong hộp kiểm đầu vào idvà trả về đầu ra true/false(rất đơn giản nhưng ID của bạn không nên là từ khóa),

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}

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>

sử dụng mã dưới đây

<script>

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

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