รับค่าช่องทำเครื่องหมายใน jQuery

ฉันจะรับค่าของช่องทำเครื่องหมายเป็น jQuery ได้อย่างไร?

ในการรับค่าของแอตทริบิวต์ค่าคุณสามารถทำสิ่งนี้:

$("input[type='checkbox']").val();

หรือถ้าคุณตั้งค่าไว้classหรือidคุณสามารถ:

$('#check_id').val();
$('.check_class').val();

อย่างไรก็ตามสิ่งนี้จะส่งกลับค่าเดียวกันไม่ว่าจะถูกตรวจสอบหรือไม่ซึ่งอาจทำให้สับสนเนื่องจากแตกต่างจากลักษณะการทำงานที่ส่งมา

หากต้องการตรวจสอบว่ามีการตรวจสอบหรือไม่ให้ทำ:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

ทั้งสองวิธีกำลังทำงาน:

• $('#checkbox').prop('checked')
• $('#checkbox').is(':checked')(ขอบคุณ@mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

ลองวิธีแก้ปัญหาเล็ก ๆ นี้:

$("#some_id").attr("checked") ? 1 : 0;

หรือ

$("#some_id").attr("checked") || 0;

วิธีที่ถูกต้องเพียงอย่างเดียวในการดึงค่าของช่องทำเครื่องหมายมีดังต่อไปนี้

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

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

• เมื่อคุณมีองค์ประกอบและคุณรู้ว่ามันเป็นช่องทำเครื่องหมายคุณสามารถอ่านคุณสมบัติของมันและคุณไม่จำเป็นต้องมี jQuery สำหรับสิ่งนั้น (เช่นelem.checked) หรือคุณสามารถใช้$(elem).prop("checked")ถ้าคุณต้องการที่จะพึ่งพา jQuery
• หากคุณจำเป็นต้องรู้ (หรือเปรียบเทียบ) มูลค่าเมื่อองค์ประกอบที่ถูกโหลดครั้งแรก (เช่นค่าเริ่มต้น) $(elem).is(":checked")วิธีที่ถูกต้องที่จะทำคือ

คำตอบมีการทำให้เข้าใจผิดโปรดตรวจสอบตัวเองด้านล่าง

http://api.jquery.com/prop/

เพียงชี้แจงสิ่งต่าง ๆ :

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

จะส่งคืน 'จริง' หรือ 'เท็จ'

$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });

เรียบง่าย แต่มีประสิทธิภาพและถือว่าคุณรู้ว่าจะพบช่องทำเครื่องหมาย:

$("#some_id")[0].checked;

ให้true/false

//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

ตัวอย่างการ
สาธิต

แม้ว่าที่จริงแล้วคำถามนี้จะขอวิธีการแก้ปัญหา jQuery ที่นี่เป็นคำตอบ JavaScript ที่บริสุทธิ์เพราะไม่มีใครพูดถึงมัน

ไม่มี jQuery:

เพียงเลือกองค์ประกอบและเข้าถึงcheckedคุณสมบัติ (ซึ่งจะส่งคืนบูลีน)

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);

<input type="checkbox"/>

นี่คือตัวอย่างการฟังchangeเหตุการณ์โดยย่อ:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});

<input type="checkbox"/>

ในการเลือกองค์ประกอบที่ตรวจสอบใช้:checkedคลาสหลอก ( input[type="checkbox"]:checked)

นี่คือตัวอย่างที่วนซ้ำinputองค์ประกอบที่ตรวจสอบและส่งคืนอาร์เรย์ที่แมปของชื่อองค์ประกอบที่ตรวจสอบ

ตัวอย่างที่นี่

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

นี่คือวิธีรับค่าของกล่องกาเครื่องหมายที่เลือกทั้งหมดเป็นอาร์เรย์:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()

เพื่อรับค่า checkboxex ที่ถูกตรวจสอบในjquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

ในpure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});

ใช้รหัสต่อไปนี้:

$('input[name^=CheckBoxInput]').val();

$('.class[value=3]').prop('checked', true);

วิธีที่ดีที่สุดคือ $('input[name="line"]:checked').val()

และคุณยังสามารถเลือกข้อความ $('input[name="line"]:checked').text()

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

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

เพียงแค่ความสนใจ ณ วันนี้ปี 2018 เนื่องจากการเปลี่ยนแปลง API ในช่วงหลายปีที่ผ่านมา removeAttr ไม่ได้ทำงานอีกต่อไป!

ตรวจสอบ Jquery หรือยกเลิกการทำเครื่องหมายที่ช่องทำเครื่องหมาย:

ไม่ดีไม่ทำงานอีกต่อไป

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

แต่คุณควรทำ:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);