Câu hỏi Làm thế nào để kiểm tra xem một hộp kiểm được kiểm tra trong jQuery?


Tôi cần kiểm tra checked tài sản của một hộp kiểm và thực hiện một hành động dựa trên thuộc tính được kiểm tra bằng cách sử dụng jQuery.

Ví dụ: nếu hộp kiểm độ tuổi được chọn, thì tôi cần hiển thị hộp văn bản để nhập tuổi, hãy ẩn hộp văn bản.

Nhưng mã sau trả về false theo mặc định:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

Làm cách nào để tôi truy vấn thành công checked bất động sản?


3921


gốc


Kiểm tra một số cách khác để thực hiện việc này bằng cách sử dụng jQuery tại đây stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); }); - Khaled.K
$ ('# isAgeSelected') trả về bộ sưu tập, thay thế bằng: $ ('# isAgeSelected') [0] .checked - zamoldar
tại sao không $('#isAgeSelected').checked - mmcrae
Vì bộ chọn jQuery trả về mảng, bạn có thể sử dụng $('#isAgeSelected')[0].checked - Felipe Leão


Các câu trả lời:


Làm cách nào để truy vấn thành công thuộc tính đã kiểm tra?

Các checked thuộc tính của phần tử DOM hộp kiểm sẽ cung cấp cho bạn checked trạng thái của phần tử.

Với mã hiện tại của bạn, bạn có thể làm điều này:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Tuy nhiên, có nhiều cách dễ hơn để thực hiện việc này, bằng cách sử dụng toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>


3102



tôi cũng đã thử điều kiện trên, nhưng nó chỉ trả về false - Prasad
$ ("# txtAge"). toggle (this.checked); Có chính xác giống như $ ("# txtAge"). Toggle (). Vì vậy, nếu vì lý do nào đó, trạng thái được kiểm tra và div tiếp theo bị ẩn (bạn đã nhấp vào nút quay lại trong trình duyệt của mình) - nó sẽ không hoạt động như mong đợi. - Maksim Vi.
@Chiramisu - Nếu bạn đã đọc câu trả lời tất cả các cách xuống, bạn sẽ nhận thấy rằng chỉnh sửa của tôi không sử dụng is(':checked') kinh doanh. - karim79
để đặt: $ ("# chkmyElement") [0] .checked = true; để có được: if ($ ("# chkmyElement") [0] .check) - JJ_Coder4Hire
Đây không phải là câu trả lời cho câu hỏi. this.checked không phải là jQuery, như OP đã yêu cầu. Ngoài ra, nó chỉ hoạt động khi người dùng nhấp vào hộp kiểm, đó không phải là một phần của câu hỏi. Câu hỏi là, một lần nữa, How to check whether a checkbox is checked in jQuery?tại bất kỳ thời điểm nào có hoặc không có nhấp vào hộp kiểm và trong jQuery. - Marc Compte


Sử dụng jQuery Là() chức năng:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

1550



Nếu bạn không cần thời gian, nới lỏng vv, bạn có thể sử dụng $("#txtAge").toggle($("#isAgeSelected").is(':checked')) - naor
+1 có nhiều cách khác nhau để kiểm tra thuộc tính. Một số thì được liệt kê ở đây - user3199690
@NickG Trên thực tế jQuery làm có một : bộ chọn hiển thị - hvdd
@hvdd Tôi biết - Tôi đã nói "tài sản", không phải là người chọn. - NickG
@ NickG ... Tôi không hiểu ý anh là gì. jQuery không có .visible "bất động sản" (bất động sản? ý bạn là phương pháp?) vì phần tử HTML không có có thể nhìn thấy bất động sản. Họ có một display  phong cách tài sản và nó phức tạp hơn một chút so với bật / tắt. - xDaizu


Sử dụng jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Sử dụng phương thức thuộc tính mới:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

473



Tôi muốn biết tại sao đây không phải là câu trả lời ... nếu bạn đang sử dụng jquery, thì .prop phương pháp là được thiết kế cách kiểm tra đạo cụ. .. ... Nếu bạn định làm .is(":checked") phương pháp tiếp cận, đó là tốt, nhưng nó không phải là cách thiết kế để làm điều đó bằng cách sử dụng jquery. đúng? - dsdsdsdsd
@ dsdsdsdsd có lẽ vì nó cần thêm một bước tương thích ngược (tôi đang đối mặt với cùng một vấn đề ngay bây giờ). - user98085
.is(":checked") và .prop("checked") là cả hai cách hợp lệ để có được kết quả tương tự trong jQuery, .is sẽ hoạt động ở tất cả các phiên bản, .prop yêu cầu 1.6+ - gnarf
Nếu bạn dùng .attr('checked') trong jQuery 1.11.3, bạn nhận được không xác định, nếu bạn sử dụng .prop('checked'), bạn sẽ nhận được đúng / sai. Tôi không thấy lý do tại sao họ thay đổi nó để làm việc theo cách này khi các trình duyệt cũ không thể hỗ trợ các phiên bản jQuery sau đó được giới thiệu .prop() và do đó cần .attr(). Ân điển tiết kiệm duy nhất là các trình duyệt cũ hơn (tức là IE 8) không thể hỗ trợ bất cứ điều gì> jQuery 1.9. Hy vọng rằng họ đã không làm điều này (làm cho .attr('checked') = undefined) trong phiên bản đó! May mắn thay, luôn có this.checked. - vapcguy


jQuery 1.6+

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

jQuery 1.5 trở xuống

$('#isAgeSelected').attr('checked')

Bất kỳ phiên bản jQuery nào

// Assuming an event handler on a checkbox
if (this.checked)

Tất cả tín dụng đều được chuyển đến Tây An.


177



Về mặt kỹ thuật, this.checked đang sử dụng Javascript thẳng. Nhưng tôi thích câu trả lời qua jQuery-phiên bản đó! - vapcguy


Tôi đang sử dụng này và điều này là làm việc hoàn toàn tốt đẹp:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Lưu ý: Nếu hộp kiểm được chọn, nó sẽ trả về true nếu không được xác định, vì vậy hãy kiểm tra giá trị "TRUE" tốt hơn.


148



Điều này làm việc vì $ ("# checkkBoxId"). Attr ("checked") trả về "checked" hoặc "" (empty string). Và một chuỗi rỗng là falsy, chuỗi không có sản phẩm nào là trung thực, xem về giá trị trung thực / giả docs.nodejitsu.com/articles/javascript-conventions/… - Adrien Be
Bởi jquery 2.1.x nó trả về luôn luôn kiểm tra nếu nó được kiểm tra theo mặc định ... Tôi không biết liệu hành vi này là cố ý, nhưng nó chắc chắn không hoạt động (tôi đoán nó là một lỗi) ... Các val () không hoạt động, nó vẫn "bật". Các prop () đang hoạt động đúng và các công trình dom.checked hoặc. - inf3rno
Và vấn đề xảy ra khi bạn phải hỗ trợ các trình duyệt cũ hơn .attr()! Nếu chỉ có họ chỉ còn lại đủ một mình .... Tìm thấy một câu trả lời trên đây cho biết bạn chỉ có thể sử dụng this.checked cho một giải pháp cross-jQuery, vì nó chỉ là về cơ bản Javascript. - vapcguy


Sử dụng:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned


115





Kể từ jQuery 1.6, hành vi của jQuery.attr() đã thay đổi và người dùng được khuyến khích không sử dụng nó để truy lục trạng thái đã kiểm tra của một phần tử. Thay vào đó, bạn nên sử dụng jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Hai khả năng khác là:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

105



vì một lý do nào đó, prop ("checked") làm việc cho tôi, nhưng không phải là (': checked') - BraveNewMath
và $ ("# txtAge") [0] .checked - Yevgeniy Afanasyev


Điều này làm việc cho tôi:

$get("isAgeSelected ").checked == true

Ở đâu isAgeSelected là id của điều khiển.

Ngoài ra, @ karim79's câu trả lời hoạt động tốt. Tôi không chắc chắn những gì tôi đã bỏ lỡ tại thời điểm tôi thử nghiệm nó.

Lưu ý, đây là câu trả lời sử dụng Microsoft Ajax, không phải jQuery


82





Nếu bạn đang sử dụng phiên bản cập nhật của jquery, bạn phải đi cho .prop để giải quyết vấn đề của bạn:

$('#isAgeSelected').prop('checked') sẽ trở lại true nếu được chọn và false nếu bỏ chọn. Tôi đã xác nhận nó và tôi đã gặp vấn đề này trước đó. $('#isAgeSelected').attr('checked') và $('#isAgeSelected').is('checked') đang quay trở lại undefined đó không phải là một câu trả lời xứng đáng cho tình hình. Vì vậy, làm như được đưa ra dưới đây.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Hy vọng nó sẽ giúp:) - Cảm ơn.


79



tại sao không $('#isAgeSelected').checked ? - mmcrae
để sử dụng. bạn cần dấu hai chấm $ ('# isAgeSelected'). (': checked') - Patrick