ตรวจสอบว่าช่องทำเครื่องหมายถูกทำเครื่องหมายด้วย jQuery

ฉันจะตรวจสอบว่าช่องทำเครื่องหมายในอาร์เรย์ช่องทำเครื่องหมายถูกตรวจสอบโดยใช้ id ของอาร์เรย์ช่องทำเครื่องหมายได้อย่างไร?

ฉันใช้รหัสต่อไปนี้ แต่จะคืนค่าจำนวนเช็คบ็อกซ์ที่เลือกไว้เสมอโดยไม่คำนึงถึงรหัส

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

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

รหัสต้องไม่ซ้ำกันในเอกสารของคุณซึ่งหมายความว่าคุณไม่ควรทำสิ่งนี้:

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

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

ที่ได้รับถ้าช่องทำเครื่องหมายมีการตรวจสอบ

สำหรับอาร์เรย์ของช่องทำเครื่องหมายที่มีชื่อเดียวกันคุณสามารถรับรายการกล่องกาเครื่องหมายได้โดย:

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

จากนั้นจึงวนซ้ำพวกเขาและดูว่ามีอะไรตรวจสอบคุณสามารถทำ:

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

หากต้องการตรวจสอบจำนวนที่คุณสามารถทำได้:

$boxes.length;

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

โค้ดด้านบนจะส่งกลับค่าจริงถ้าช่องทำเครื่องหมายถูกทำเครื่องหมายหรือเท็จถ้าไม่ได้

วิธีการทั้งหมดต่อไปนี้มีประโยชน์:

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

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

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

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

ขอแนะนำให้หลีกเลี่ยงการใช้ DOMelement หรือ inline "this.checked" แทน jQuery on method ควรใช้ listener เหตุการณ์

รหัส jQuery เพื่อตรวจสอบว่ามีการทำเครื่องหมายในช่องทำเครื่องหมายหรือไม่:

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

อีกวิธีหนึ่งคือ:

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

แนวคิดที่สำคัญที่สุดที่ต้องจำเกี่ยวกับคุณลักษณะที่ถูกตรวจสอบคือมันไม่สอดคล้องกับคุณสมบัติที่ตรวจสอบ แอ็ตทริบิวต์สอดคล้องกับคุณสมบัติ defaultChecked จริง ๆ และควรใช้เพื่อตั้งค่าเริ่มต้นของช่องทำเครื่องหมายเท่านั้น ค่าแอททริบิวที่ทำเครื่องหมายไว้จะไม่เปลี่ยนแปลงตามสถานะของช่องทำเครื่องหมายในขณะที่คุณสมบัติที่เลือกทำอยู่ ดังนั้นวิธีที่เข้ากันได้ข้ามเบราว์เซอร์เพื่อตรวจสอบว่ามีการตรวจสอบกล่องกาเครื่องหมายคือการใช้คุณสมบัติ

วิธีการด้านล่างทั้งหมดเป็นไปได้

elem.checked 

$(elem).prop("checked") 

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

คุณสามารถใช้รหัสนี้

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

ตามเอกสาร 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 คือ NOTE -: ถูกเลือก

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ทำงาน

คุณสามารถลองสิ่งนี้:

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

คุณสามารถใช้รหัสที่แนะนำต่อไปนี้โดย jquery

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

ฉันรู้ว่า OP ต้องการ jquery แต่ในกรณีของฉัน pure JS คือคำตอบดังนั้นหากใครเช่นฉันอยู่ที่นี่และไม่มี jquery หรือไม่ต้องการใช้ - นี่คือคำตอบ JS:

document.getElementById("myCheck").checked

มันจะคืนค่าจริงถ้าอินพุตด้วย ID myCheck ถูกตรวจสอบและเท็จถ้าไม่ได้ตรวจสอบ

เรียบง่ายเหมือนที่

คุณสามารถทำได้ง่ายๆเช่น;

Fiddle ทำงาน

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

นี่เป็นความคิดที่ฉันใช้บ่อย:

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

ถ้า cheked มันจะคืนค่า 1 มิฉะนั้นจะส่งคืน 0

สาธิตอย่างง่ายสำหรับการตรวจสอบและตั้งค่ากล่องกาเครื่องหมาย

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

เพียงแค่พูดในตัวอย่างของฉันสถานการณ์เป็นกล่องโต้ตอบที่ตรวจสอบแล้วกล่องกาเครื่องหมายก่อนที่จะปิดกล่องโต้ตอบ ไม่มีข้างต้นและวิธีการตรวจสอบว่ามีการเลือกช่องทำเครื่องหมายใน 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 ที่ซ้อนกันในหน้านี้ทำให้เกิดปัญหา วิธีแก้ปัญหาอยู่ด้านบน

สำหรับช่องทำเครื่องหมายด้วยรหัส

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

คุณสามารถทำได้

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

คุณจะได้รับtrueหรือfalseเป็นค่าตอบแทนสำหรับไวยากรณ์ข้างต้น คุณสามารถใช้มันในถ้าข้อเป็นนิพจน์บูลีนปกติ

สิ่งนี้จะช่วยได้

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

จริงๆแล้วตาม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()มันยังสามารถใช้เพื่อตั้งค่า

ตรวจสอบช่องทำเครื่องหมายสลับ

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

ใช้รหัสนี้คุณสามารถเลือกอย่างน้อยหนึ่งช่องทำเครื่องหมายหรือไม่ได้อยู่ในกลุ่มช่องทำเครื่องหมายที่แตกต่างกันหรือจากหลายช่องทำเครื่องหมาย การใช้สิ่งนี้คุณไม่จำเป็นต้องลบ 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>

เนื่องจากเป็นช่วงกลางปี ​​2019 และ jQuery บางครั้งใช้การ backseat กับสิ่งต่าง ๆ เช่น VueJS, React และอื่น ๆ นี่คือตัวเลือกฟัง onload listener Javascript ของ vanilla ล้วนๆ:

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

คำถามของคุณไม่ชัดเจน: คุณต้องการให้ "checkbox array id" ที่อินพุตและรับtrue/falseที่ output - ด้วยวิธีนี้คุณจะไม่ทราบว่าช่องทำเครื่องหมายใดถูกตรวจสอบ (ตามชื่อฟังก์ชั่นของคุณแนะนำ) ดังนั้นด้านล่างนี้เป็นข้อเสนอร่างของฉันของคุณisCheckedByIdซึ่งในช่องทำเครื่องหมายนำเข้าidและผลตอบแทนtrue/false(มันง่ายมาก แต่ ID ของคุณไม่ควรเป็นคำหลัก)

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>

ใช้รหัสด้านล่าง

<script>

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

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