jQuery: Kiểm tra nếu hộp kiểm KHÔNG được chọn

Tôi đang gặp khó khăn khi tìm ra điều này. Tôi có hai hộp kiểm (trong tương lai sẽ có thêm):

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

Về cơ bản, tôi muốn viết một câu lệnh if và kiểm tra xem một trong số chúng được chọn và một câu lệnh khác KHÔNG được chọn. Cách dễ nhất để thực hiện những điều sau là gì:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

Một cách đáng tin cậy mà tôi sử dụng là:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

Nếu bạn muốn lặp lại các phần tử đã kiểm tra, hãy sử dụng phần tử mẹ

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

Thêm thông tin:

Điều này hoạt động tốt bởi vì tất cả các hộp kiểm đã được kiểm tra một thuộc tính lưu trữ trạng thái thực tế của hộp kiểm. Nếu bạn muốn, bạn có thể kiểm tra trang và cố gắng kiểm tra và bỏ chọn một hộp kiểm, và bạn sẽ thấy thuộc tính "đã kiểm tra" (nếu có) sẽ vẫn như cũ. Thuộc tính này chỉ đại diện cho trạng thái ban đầu của hộp kiểm chứ không phải trạng thái hiện tại . Trạng thái hiện tại được lưu trữ trong thuộc tính đã kiểm tra của phần tử dom cho hộp kiểm đó.

Xem Thuộc tính và Thuộc tính trong HTML

if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}

Bạn cũng có thể sử dụng .not()phương thức jQuery hoặc :not()bộ chọn:

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

Ví dụ về JSFiddle

Ghi chú bổ sung

Từ tài liệu API jQuery cho :not() bộ chọn :

Các .not () phương pháp sẽ kết thúc cung cấp cho bạn với các lựa chọn có thể đọc được nhiều hơn đẩy selectors phức tạp hoặc biến thành một : không () chọn lọc. Trong hầu hết các trường hợp, nó là một lựa chọn tốt hơn.

Một cách thay thế:

Đây là một ví dụ làm việc và đây là mã, bạn cũng nên sử dụng prop.

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

Tôi đã nhận xét về cách chuyển đổi thuộc tính đã kiểm tra.

if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )

Tôi đang tìm kiếm một triển khai trực tiếp hơn như avijendr đã đề xuất.

Tôi gặp một chút rắc rối với cú pháp của anh ấy / cô ấy, nhưng tôi đã làm được điều này:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

Trong trường hợp của tôi, tôi có một bảng với một lớp user-formsvà tôi đang kiểm tra xem có bất kỳ hộp kiểm nào có chuỗi checkPrinttrong chúng idđã được bỏ chọn hay không.

Tôi nghĩ cách dễ nhất (với jQuery) để kiểm tra xem hộp kiểm được chọn hay KHÔNG là:

nếu 'được kiểm tra':

if ($(this).is(':checked')) {
// I'm checked let's do something
}

nếu KHÔNG được 'kiểm tra':

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

Đây tôi có một đoạn mã cho câu hỏi này.

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>

Để làm điều đó với những .attr()gì bạn có, để xem nó có được kiểm tra hay không .attr("checked", "checked"), và nếu không thì nó sẽ.attr("checked") == undefined

Trả về true nếu tất cả checbox được chọn trong một div

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}

Điều kiện đơn giản và dễ kiểm tra hoặc không kiểm tra

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>

thử cái này

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

Trong Mã trên, chọn phần tử theo Id (#checkSurfaceEnvironment-1)sau đó lọc ra trạng thái đã kiểm tra của nó bằng (:checked)bộ lọc.

Nó sẽ trả về mảng đối tượng phần tử đã kiểm tra. Nếu có bất kỳ đối tượng nào tồn tại trong mảng thì điều kiện if sẽ được thỏa mãn.

Có hai cách bạn có thể kiểm tra tình trạng.

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

HOẶC bạn cũng có thể sử dụng cái này

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

Tôi hy vọng điều này hữu ích cho bạn.

Đây là cách đơn giản nhất được đưa ra

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>

Tôi đã sử dụng cái này và làm việc cho tôi!

$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});

Tôi biết điều này đã được trả lời, nhưng đây vẫn là một cách tốt để làm điều đó:

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}

if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});