Nhận giá trị hộp kiểm trong jQuery

Làm cách nào tôi có thể nhận được giá trị của hộp kiểm trong jQuery?

Để có được giá trị của thuộc tính Value, bạn có thể làm như thế này:

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

Hoặc nếu bạn đã đặt classhoặc idcho nó, bạn có thể:

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

Tuy nhiên, điều này sẽ trả về cùng một giá trị cho dù nó có được kiểm tra hay không, điều này có thể gây nhầm lẫn vì nó khác với hành vi biểu mẫu đã gửi.

Để kiểm tra xem nó có được kiểm tra hay không, hãy làm:

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

2 cách này đang hoạt động:

• $('#checkbox').prop('checked')
• $('#checkbox').is(':checked')(cảm ơn @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" />

Hãy thử giải pháp nhỏ này:

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

hoặc là

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

Các cách chính xác duy nhất để truy xuất giá trị của hộp kiểm tra như sau

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

như được giải thích trong các tài liệu chính thức trong trang web của jQuery. Các phương thức còn lại không liên quan gì đến thuộc tính của hộp kiểm, chúng đang kiểm tra thuộc tính có nghĩa là chúng đang kiểm tra trạng thái ban đầu của hộp kiểm khi nó được tải. Vì vậy, trong ngắn hạn:

• Khi bạn có phần tử và bạn biết đó là một hộp kiểm, bạn chỉ cần đọc thuộc tính của nó và bạn sẽ không cần jQuery cho điều đó (tức là elem.checked) hoặc bạn có thể sử dụng $(elem).prop("checked")nếu bạn muốn dựa vào jQuery.
• Nếu bạn cần biết (hoặc so sánh) giá trị khi phần tử được tải lần đầu tiên (tức là giá trị mặc định), cách chính xác để làm điều đó là $(elem).is(":checked").

Câu trả lời sai lệch, vui lòng kiểm tra bên dưới:

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

Chỉ cần làm rõ mọi chuyện:

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

Sẽ trả về 'true' hoặc 'false'

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

Đơn giản nhưng hiệu quả và giả sử bạn biết hộp kiểm sẽ được tìm thấy:

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

Tặng 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

Ví dụ
Demo

Mặc dù thực tế rằng câu hỏi này đang yêu cầu một giải pháp jQuery, đây là một câu trả lời thuần túy vì không ai đề cập đến nó.

Không có jQuery:

Đơn giản chỉ cần chọn phần tử và truy cập thuộc checkedtính (trả về boolean).

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

alert(checkbox.checked);

<input type="checkbox"/>

Dưới đây là một ví dụ nhanh chóng nghe changesự kiện này:

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

<input type="checkbox"/>

Để chọn các phần tử được kiểm tra, sử dụng :checkedlớp giả (input[type="checkbox"]:checked ).

Dưới đây là một ví dụ lặp lại inputcác phần tử được kiểm tra và trả về một mảng được ánh xạ của tên của phần tử được kiểm tra.

Ví dụ ở đây

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>

Dưới đây là cách lấy giá trị của tất cả các hộp kiểm tra dưới dạng một mảng:

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

để lấy giá trị của hộp kiểm tra trong 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
});

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

Sử dụng mã sau đây:

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

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

Cách tốt nhất là $('input[name="line"]:checked').val()

Và bạn cũng có thể nhận được văn bản đã chọn $('input[name="line"]:checked').text()

Thêm thuộc tính giá trị và tên vào đầu vào nút radio của bạn. Hãy chắc chắn rằng tất cả các đầu vào có cùng thuộc tính tên.

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

Chỉ cần chú ý, như ngày hôm nay, 2018, do api thay đổi qua các năm. removeAttr bị lỗi, KHÔNG làm việc nữa!

Kiểm tra Jquery hoặc bỏ chọn hộp kiểm:

Xấu, không làm việc nữa.

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

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

Thay vào đó bạn nên làm:

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