jQuery: ทดสอบว่าไม่ได้เลือกช่องทำเครื่องหมาย

ฉันมีปัญหาในการหาข้อมูลนี้ ฉันมีช่องทำเครื่องหมายสองช่อง (ในอนาคตจะมีมากกว่านี้):

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

โดยทั่วไปฉันต้องการเขียนคำสั่ง if และทดสอบว่ามีการตรวจสอบข้อใดข้อหนึ่งและไม่ได้ตรวจสอบอีกรายการหนึ่ง วิธีใดที่ง่ายที่สุดในการทำสิ่งต่อไปนี้:

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

วิธีหนึ่งที่น่าเชื่อถือที่ฉันใช้คือ:

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

หากคุณต้องการวนซ้ำองค์ประกอบที่เลือกให้ใช้องค์ประกอบหลัก

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

ข้อมูลเพิ่มเติม:

วิธีนี้ใช้งานได้ดีเนื่องจากช่องทำเครื่องหมายทั้งหมดมีการตรวจสอบคุณสมบัติซึ่งเก็บสถานะจริงของช่องทำเครื่องหมาย หากคุณต้องการตรวจสอบหน้าเว็บและลองทำเครื่องหมายและยกเลิกการเลือกช่องทำเครื่องหมายและคุณจะสังเกตเห็นว่าแอตทริบิวต์ "ติ๊ก" (ถ้ามี) จะยังคงเหมือนเดิม แอตทริบิวต์นี้แสดงถึงสถานะเริ่มต้นของช่องทำเครื่องหมายเท่านั้นไม่ใช่สถานะปัจจุบัน สถานะปัจจุบันจะถูกเก็บไว้ในคุณสมบัติที่ตรวจสอบขององค์ประกอบ dom สำหรับช่องทำเครื่องหมายนั้น

ดูคุณสมบัติและคุณสมบัติใน HTML

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

คุณยังสามารถใช้.not()วิธีjQuery หรือ:not()ตัวเลือก:

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

ตัวอย่าง JSFiddle

หมายเหตุเพิ่มเติม

จากเอกสาร jQuery API สำหรับ:not() ตัวเลือก :

.not () วิธีการจะสิ้นสุดการให้คุณกับการเลือกอ่านได้มากขึ้นกว่าการผลักดันเตอร์ที่ซับซ้อนหรือเป็นตัวแปร: ไม่ () เลือกตัวกรอง ในกรณีส่วนใหญ่เป็นทางเลือกที่ดีกว่า

ทางเลือกอื่น:

นี่คือตัวอย่างการทำงานและนี่คือรหัสคุณควรใช้ 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");
    }
});​

ฉันแสดงความคิดเห็นเกี่ยวกับวิธีการสลับแอตทริบิวต์ที่ตรวจสอบแล้ว

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

ฉันกำลังมองหาการใช้งานที่ตรงมากขึ้นเช่นที่ avijendr แนะนำ

ฉันมีปัญหาเล็กน้อยกับไวยากรณ์ของเขา / เธอ แต่ฉันทำให้มันใช้งานได้:

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

ในกรณีของฉันฉันมีตารางที่มีคลาสuser-formsและฉันกำลังตรวจสอบว่าช่องทำเครื่องหมายใด ๆ ที่มีสตริงcheckPrintอยู่idนั้นไม่ได้เลือกไว้หรือไม่

ฉันคิดว่าวิธีที่ง่ายที่สุด (ด้วย jQuery) ในการตรวจสอบว่ามีการเลือกช่องทำเครื่องหมายหรือไม่คือ:

ถ้า 'ทำเครื่องหมาย':

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

ถ้าไม่ 'ตรวจสอบ':

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

ฉันมีตัวอย่างสำหรับคำถามนี้ที่นี่

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

ในการทำ.attr()เช่นเดียวกับที่คุณมีเพื่อดูว่ามีการตรวจสอบหรือไม่.attr("checked", "checked")และหากไม่เป็นเช่นนั้น.attr("checked") == undefined

ส่งคืนค่าจริงหากมีการเลือกช่องทำเครื่องหมายทั้งหมดใน 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;
}

ง่ายและสะดวกในการตรวจสอบหรือไม่ได้ตรวจสอบเงื่อนไข

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

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

ลองอันนี้

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

ในโค้ดด้านบนเลือกองค์ประกอบตาม Id (#checkSurfaceEnvironment-1)จากนั้นกรองสถานะการตรวจสอบตาม(:checked)ตัวกรอง

มันจะส่งคืนอาร์เรย์ของวัตถุองค์ประกอบที่ตรวจสอบ หากมีวัตถุใด ๆ อยู่ในอาร์เรย์ถ้าเงื่อนไขเป็นที่พอใจ

มีสองวิธีที่คุณสามารถตรวจสอบเงื่อนไขได้

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

หรือคุณสามารถใช้อันนี้ก็ได้

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

ฉันหวังว่านี่จะเป็นประโยชน์สำหรับคุณ

นี่คือวิธีที่ง่ายที่สุดที่ได้รับ

 <script type="text/javascript">

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

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

                }

            });

        });

    </script>

ฉันใช้สิ่งนี้และได้ผลสำหรับฉัน!

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

ฉันรู้ว่าสิ่งนี้ได้รับคำตอบแล้ว แต่ยังคงเป็นวิธีที่ดีที่จะทำ:

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
    }

});