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 checkedtính 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 đoạn mã sau trả về falsetheo mặc định:

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

<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 selected
</div>

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

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

Các checkedtài sản của một yếu tố checkbox DOM sẽ cung cấp cho bạn checkedtrạng thái 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 để làm điều 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>

Sử dụng hàm is () của jQuery :

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

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
}

jQuery 1.6+

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

jQuery 1.5 trở xuống

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

Mọi phiên bản của jQuery

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

Tất cả tín dụng đến Tây An .

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.

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

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

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

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

Đâu isAgeSelectedlà id của điều khiển.

Ngoài ra, câu trả lời của @ karim79 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

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

$('#isAgeSelected').prop('checked')sẽ trở lại truenếu được chọn và falsenế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')và $('#isAgeSelected').is('checked')đang trở lại undefinedmà không phải là một 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.

Sử dụng Clicktrình xử lý sự kiện cho thuộc tính hộp kiểm là không đáng tin cậy, vì thuộc checkedtính 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 changetrình xử lý sự kiện, chẳng hạn như mã này đượ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 thực hiện).

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

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

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.

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 onchangesự kiện của hộp kiểm một chức năng kiểm tra xem hộp kiểm đã được kiểm tra chưa và đặt thuộc hiddentính 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à một mẹo để bạn kiểm tra nó.

Phụ lục

Nếu khả năng tương thích giữa các trình duyệt là một vấn đề thì tôi đề xuất đặt thuộc tính CSS displaythành không và nộ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.

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

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.

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:

• http://api.jquery.com/attr/

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

Mã này sẽ giúp bạn

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

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

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

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.

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

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

Điều này trả về truenếu đầu vào được kiểm tra và falsenếu nó không.

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

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.

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"

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

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 bằng cách sử dụng .attr('checked')hàm không. Nếu đó là fade fade trong phần tử #saveForm và nếu không fadeOut phần tử saveForm.

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

Mặc dù bạn đã đề xuất một giải pháp JavaScript cho vấn đề của mình (hiển thị textboxkhi checkboxcó checked), 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.

Dưới đây là một Fiddle để chứng minh phương pháp này .

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

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

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