it-swarm-vi.com

Làm cách nào để kiểm tra xem hộp kiểm có được kiểm tra trong jQuery không?

Tôi cần kiểm tra thuộc tính checked của hộp kiểm và thực hiện hành động dựa trên thuộc tính được kiểm tra bằ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, nếu không thì ẩn hộp văn bản.

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

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

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

4217
Prasad

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

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

Trong đó isAgeSelected là id của điều khiển.

Ngoài ra, @ karim79's answer 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

90
Prasad

Làm thế nào để tôi truy vấn thành công tài sản được kiểm tra?

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

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

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

Tuy nhiên, có một cách đẹp hơn nhiều để làm điều này, 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>
3258
karim79

Sử dụng is () function của jQuery:

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

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
}
512
SeanDowney

jQuery 1.6+

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

jQuery 1.5 trở xuống

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

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

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

Tất cả tín dụng đi đến Xian .

207
ungalcrys

Tôi đang sử dụng cái này và nó hoạt động hoàn toàn tốt:

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

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

155
Pradeep

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
133
Lalji Dhameliya

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 xuất trạng thái đã kiểm tra của 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")
113
Salman A

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

$('#isAgeSelected').prop('checked') sẽ trả về true nếu được chọn và false nếu không được chọn. Tôi đã xác nhận nó và tôi đã gặp vấn đề này sớm hơn. $('#isAgeSelected').attr('checked')$('#isAgeSelected').is('checked') đang trở lại undefined không phải là câu trả lời xứng đáng cho tình huống này. 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.

84
Rajesh Omanakuttan

Sử dụng trình xử lý sự kiện Click cho thuộc tính hộp kiểm là không đáng tin cậy, vì thuộc tính checked có thể thay đổi trong quá trình thực thi trình xử lý sự kiện!

Lý tưởng nhất là bạn muốn đặt mã của mình vào một trình xử lý sự kiện change như nó được kích hoạt mỗi khi giá trị của hộp kiểm được thay đổi (không phụ thuộc vào cách nó được thực hiện như vậy).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
58
arviman

Tôi quyết định đăng một câu trả lời về cách làm điều tương tự chính xác mà không cần jQuery. Chỉ vì tôi là một kẻ nổi loạn.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Đầu tiên bạn có được cả hai yếu tố bằng ID của họ. Sau đó, bạn chỉ định sự kiện onchange của hộp kiểm tra một chức năng kiểm tra xem hộp kiểm có được kiểm tra hay không và đặt thuộc tính hidden của trường văn bản tuổi một cách thích hợp. Trong ví dụ đó sử dụng toán tử ternary.

Đây là fiddle để bạn kiểm tra nó.

Phụ lục

Nếu khả năng tương thích trình duyệt chéo là một vấn đề thì tôi đề xuất đặt thuộc tính CSS display thành nonenội tuyến.

elem.style.display = this.checked ? 'inline' : 'none';

Chậm hơn nhưng tương thích trình duyệt chéo.

51
Octavian Damiean

Sử dụng:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Điều này có thể giúp đỡ nếu bạn muốn rằng hành động cần thiết chỉ phải được thực hiện khi bạn đánh dấu vào ô không tại thời điểm bạn xóa séc.

50
UDB

Tôi tin rằng bạn có thể làm điều này:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
45
xenon

Có nhiều cách để kiểm tra xem hộp kiểm có được kiểm tra hay không:

Cách kiểm tra bằng jQuery

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

Kiểm tra ví dụ hoặc tài liệu:

43
Parth Chavda

Tôi chạy vào vấn đề chính xác tương tự. Tôi có một hộp kiểm ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

Trong mã jQuery, tôi đã sử dụng bộ chọn sau để kiểm tra xem hộp kiểm có được kiểm tra hay không và dường như nó hoạt động như một bùa mê.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Tôi chắc rằng bạn cũng có thể sử dụng ID thay vì CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Tôi hy vọng cái này sẽ giúp bạn.

41
Nertim

Đây là một số phương pháp khác nhau để làm điều tương tự:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
40
Sangeet Shah

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
39
ashish amatya

Dùng cái này:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

Độ dài lớn hơn 0 nếu hộp kiểm được chọn.

34
Hamid N K

Bạn có thể sử dụng mã này:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
33
sandeep kumar

Cách làm của tôi là:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
32
Dalius I
$(selector).attr('checked') !== undefined

Điều này trả về true nếu đầu vào được chọn và false nếu không.

31
fe_lix_

Bạn có thể dùng:

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

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

Cả hai nên làm việc.

30
Muhammad Awais
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
30
Jumper Pot

1) Nếu đánh dấu HTML của bạn là:

<input type="checkbox"  />

attr sử dụng:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Nếu prop được sử dụng:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Nếu đánh dấu HTML của bạn là:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr sử dụng:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop được sử dụng:

$(element).prop("checked") // Will return true whether checked="checked"
25
Somnath Kharat

Ví dụ này là cho nút.

Hãy thử như sau:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});
24
usayee

Câu trả lời hàng đầu đã không làm điều đó cho tôi. Điều này đã làm mặc dù:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Về cơ bản khi phần tử # li_13 được nhấp, nó sẽ kiểm tra xem phần tử # có đồng ý (là hộp kiểm) được kiểm tra hay không bằng cách sử dụng hàm .attr('checked'). Nếu đó là fade fade trong phần tử #saveForm và nếu không fadeOut phần tử saveForm.

24
MDMoore313

Mặc dù bạn đã đề xuất giải pháp JavaScript cho vấn đề của mình (hiển thị textbox khi checkboxchecked), vấn đề này có thể được giải quyết chỉ bằng css . Với phương pháp này, biểu mẫu của bạn hoạt động cho người dùng đã tắt JavaScript.

Giả sử rằng bạn có HTML sau:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Bạn có thể sử dụng CSS sau để đạt được chức năng mong muốn:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Đối với các kịch bản khác, bạn có thể nghĩ về các bộ chọn CSS thích hợp.

Đây là một Fiddle để thể hiện phương pháp này .

21
Ormoz

Tôi đang sử dụng cái này:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
21
Nishant Kumar

Chuyển đổi: 0/1 hoặc khác

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});
21
user2385302

Tôi nghĩ nó sẽ đơn giản

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
18
Jitendra Damor

Tôi chắc chắn đó không phải là một sự mặc khải, nhưng tôi đã không nhìn thấy tất cả trong một ví dụ:

Công cụ chọn cho tất cả các hộp kiểm tra (trên trang):

$('input[type=checkbox]:checked')
17
Tsonev
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

hoặc là

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
17
ijarlax

Bao gồm jQuery từ hệ thống tệp cục bộ. Tôi đã sử dụng Google CDN và cũng có nhiều CDN để lựa chọn.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Mã sẽ thực thi ngay khi một hộp kiểm bên trong lớp mycheck được nhấp vào. Nếu hộp kiểm được nhấp hiện tại được chọn thì nó sẽ vô hiệu hóa tất cả những cái khác và kích hoạt hộp kiểm hiện tại. Nếu cái hiện tại không được chọn, nó sẽ lại kích hoạt tất cả các hộp kiểm tra để kiểm tra lại.

<script type="text/javascript">
    $(document).ready(function() {

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() {
            if ($($(this)).is(':checked')) {

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            }
            else {
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            }
        });
    });
</script>

Hình thức đơn giản để kiểm tra

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

Màn hình đầu ra:

Enter image description here

16
Madan Sapkota

Thuộc tính checked của một input type="checkbox" được ánh xạ với thuộc tính defaultChecked, không với thuộc tính checked.

Vì vậy, khi thực hiện một cái gì đó trong một trang khi hộp kiểm tra được bỏ chọn, hãy sử dụng phương thức prop() thay thế. Nó tìm nạp giá trị thuộc tính và thay đổi khi trạng thái của hộp kiểm thay đổi.

Sử dụng attr() hoặc getAttribute (bằng JavaScript thuần) trong những trường hợp này không phải là cách làm việc đúng đắn.

nếu elem là hộp kiểm liên quan thì hãy làm một cái gì đó như thế này để lấy giá trị:

elem.checked

hoặc là

$(elem).prop('checked')
15
subham.saha1004

Tôi đã xác minh trong Firefox 9.0.1 rằng các công việc sau đây để nắm bắt trạng thái thay đổi bài đăng của hộp kiểm:

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});
15
Joshua Harris

Tự động

$(document).ready(function()
{
    $('#isAgeSelected').change(function()
    {
        alert( 'value =' + $('#chkSelect').attr('checked') );
    });
});

HTML

<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>

<br/><br/>

<input type="button" id="btnCheck" value="check" />

jQuery

$(document).ready(function()
{
    $('#btnCheck').click(function()
    {
        var isChecked = $('#isAgeSelected').attr('checked');

        if (isChecked == 'checked')
            alert('check-box is checked');
        else
            alert('check-box is not checked');
    })
});

Ajax

function check()
{
    if (isAgeSelected())
        alert('check-box is checked');
    else
        alert('check-box is not checked');
}

function isAgeSelected()
{
    return ($get("isAgeSelected").checked == true);
}
13
Khaled.K

Đây là số lượng mã tối thiểu tôi nghĩ rằng tôi cần để làm một cái gì đó như thế này một cách hiệu quả. Tôi thấy phương pháp này hữu ích; nó trả về một mảng các hộp kiểm được kiểm tra và sau đó bạn có thể sử dụng giá trị của chúng (giải pháp này sử dụng jQuery):

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
    alert('Please select check boxes');
    return false;
};

// And this is how you use them:
checkedBoxes.each(function() {
    output +=  this.value + ", ";
};

In "đầu ra" sẽ cung cấp cho bạn một danh sách các giá trị được phân tách bằng dấu phẩy.

12
Daryl H

Tôi đã gặp vấn đề tương tự và dường như không có giải pháp được đăng nào hoạt động và sau đó tôi phát hiện ra rằng đó là do ASP.NET biểu hiện điều khiển CheckBox dưới dạng SPAN với INPUT, vì vậy ID CheckBox thực sự là ID của SPAN INPUT, vì vậy bạn nên sử dụng:

$('#isAgeSelected input')

thay vì

$('#isAgeSelected')

và sau đó tất cả các phương pháp được liệt kê ở trên nên hoạt động.

12
tsw_mik

Đây là một ví dụ bao gồm khởi tạo hiển thị/ẩn để khớp với trạng thái của hộp kiểm khi tải trang ; tính đến thực tế là firefox nhớ trạng thái của các hộp kiểm khi bạn làm mới trang, nhưng sẽ không nhớ trạng thái của các phần tử được hiển thị/ẩn.

$(function() {
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(với sự giúp đỡ từ các câu trả lời khác cho câu hỏi này)

12
Tim Abell

Đây là cách giải quyết của tôi:

$('#vcGoButton').click(function () {
    var buttonStatus = $('#vcChangeLocation').prop('checked');
    console.log("Status is " + buttonStatus);
    if (buttonStatus) {
        var address = $('#vcNewLocation').val();
        var cabNumber = $('#vcVehicleNumber').val();
        $.get('postCabLocation.php',
              {address: address, cabNumber: cabNumber},
              function(data) {
                  console.log("Changed vehicle " + cabNumber + " location to " + address );
              });
    }
    else {
        console.log("VC go button clicked, but no location action");
    }
});
10
cauleyfj

Đơn giản chỉ cần sử dụng nó như dưới đây

 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });
10
Himanshu Upadhyay

Sử dụng:

$(this).toggle($("input:checkbox", $(this))[0].checked);

Khi bạn chọn ngoài ngữ cảnh, hãy nhớ rằng bạn cần [0] để truy cập hộp kiểm.

9
Richard Maxwell

Sử dụng thuần túy JavaScript :

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
9
Carlos Abraham

Setter:

$("#chkmyElement")[0].checked = true;

Getter:

if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}
9
JJ_Coder4Hire

Tôi thực sự sẽ mở đầu sự kiện change.

$('#isAgeSelected').change(function() {
    $("#txtAge").toggle(this.checked);
});

Bản trình diễn Fiddle

8
Tarion

Thử đi,

$('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    } 
});
8
Mohammed Safeer

Tôi đang sử dụng jQuery 1.11.1 và tôi cũng gặp rắc rối với việc thiết lập và đọc giá trị hộp kiểm.

Cuối cùng tôi đã giải quyết nó bằng hai chức năng sau:

function setCheckboxValue(checkBoxId, checked) {
    if (checkBoxId && (checked === true || checked === false)) {
        var elem = $('#' + checkBoxId);
        if (checked === true) {
            elem.attr('checked', 'checked');
        } else {
            elem.removeAttr('checked');
        }
    }
}

function isChecked(checkBoxId) {
    return $('#' + checkBoxId).attr('checked') != null;
}

Nó có thể trông hơi bẩn nhưng nó giải quyết được tất cả các vấn đề có dây mà tôi gặp phải giữa các loại trình duyệt khác nhau.

7
Jacob

Một bộ chọn trả về nhiều đối tượng và nó phải lấy mục đầu tiên trong mảng:

// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;
7
zamoldar
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
6
user1996628

Giải pháp này thì sao?

$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();
4
Iter Ator

Bạn có thể thử mã này:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
4
Praneeth Madush

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

E.X -

1) Chạy khi tải để lấy giá trị hộp kiểm nếu hộp kiểm tuổi được chọn, sau đó tôi cần hiển thị hộp văn bản để nhập tuổi, nếu không thì ẩn hộp văn bản.

2) 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, nếu không thì ẩn hộp văn bản bằng cách sử dụng sự kiện nhấp của hộp kiểm.

vì vậy mã không trả về false theo mặc định:

Hãy thử như sau:

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) {
                $('#Age').show();
            } else {
                $('#Age').hide();
            }   
            $('#isAge').click(function() {
                if(document.getElementById('isAge').checked) {
                    $('#Age').show();
                } else {
                    $('#Age').hide();
                }
            }); 
            </script>
        </body>
    </html>

Đây là phiên bản sửa đổi: https://jsfiddle.net/sedhal/0hygLtrz/7/

3
sedhal soni

Trong trường hợp bạn cần biết nếu một hộp kiểm tra được kiểm tra thuần javascript bạn nên sử dụng mã này.

let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
    alert("element is checked");
} else {
    alert("element is  ot checked");
}
2
Ir Calif

Đối với các phiên bản cũ hơn của jQuery, tôi đã phải sử dụng như sau,

$('#change_plan').live('click', function() {
     var checked = $('#change_plan').attr('checked');
     if(checked) {
          //Code       
     }
     else {
          //Code       
     }
});
2
Vajira Lasantha
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
2
darhamid
$('#chk').change(function() { 
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');
1
argie cruz

Trong trường hợp nếu bạn cần sử dụng lớp CSS làm bộ chọn jQuery, bạn có thể thực hiện như sau:

$(document).ready(function () {
        $('.myOptionCheckbox').change(function () {            
            if ($(this).prop('checked') == true) {
                console.log("checked");           
            }
            else {
                console.log("unchecked");                
            }
        });
    });

Nó cũng hoạt động tốt cho checkboxesradioboxes.

1
Developer

Chức năng này là thay thế và ổn định:

$('#isAgeSelected').context.checked
(return True/False)

Ví dụ:

if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
    /*.....*/
}else{
    /*.....*/
}
1
Ferhat KOÇER

Ở trạng thái hộp kiểm js thuần dễ đọc hơn

isAgeSelected.checked
function check() {
  txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Age <input type="checkbox" id="isAgeSelected"/>

<button onclick="check()">Check</button>

<div id="txtAge" style="display:none">
Age is selected
</div>
0
Kamil Kiełczewski
if($('#isAgeSelected').prop('checked')) {
    // do your action 
}
0
Vikash

Vui lòng thử mã bên dưới để kiểm tra hộp kiểm có được chọn hay không

$(document).ready(function(){

$("#isAgeSelected").on('change',function(){

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

});

});

0
Javed Khan