如何檢查是否在jQuery中檢查復選框?


Answers

使用jQuery的is()函數:

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

我需要檢查復選框的checked屬性,並使用jQuery根據選中的屬性執行操作。

例如,如果年齡複選框被選中,那麼我需要顯示一個文本框來輸入年齡,否則隱藏文本框。

但是下面的代碼默認返回false

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

如何成功查詢checked屬性?




這個例子是用於按鈕的。

嘗試以下操作:

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



我認為這將是一個簡單的

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



我正在使用這個:

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

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



自從jQuery 1.6以來, jQuery.attr()的行為已經發生了變化,我們鼓勵用戶不要使用它來檢索元素的checked狀態。 相反,你應該使用jQuery.prop()

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

其他兩種可能性是:

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



有很多方法可以檢查復選框是否被選中:

使用jQuery進行檢查的方法

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

檢查示例或文檔:




對複選框屬性使用Click事件處理程序是不可靠的,因為在執行事件處理程序本身期間, checked屬性可能會更改!

理想情況下,您希望將代碼放入change事件處理程序中,例如,每次更改複選框的值時都會觸發它(不依賴於如何完成此操作)。

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

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



您可以使用:

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

他們都應該工作。




我這樣做的方式是:

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



最重要的答案並不適合我。 儘管如此:

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

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

基本上,當單擊元素#li_13時,它會檢查是否通過使用.attr('checked')函數.attr('checked')元素#agree(這是複選框)。 如果是,則在#saveForm元素中淡入淡出,如果不是淡出saveForm元素。




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

如果輸入被選中,則返回true否則返回false




這對我有效:

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

isAgeSelected是控件的ID。

此外,@ karim79的answer正常工作。 我不確定我在測試時錯過了什麼。

請注意,這是答案使用Microsoft Ajax,而不是jQuery




這是做同樣事情的一些不同的方法:

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




jQuery 1.6+

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

jQuery 1.5及以下版本

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

任何版本的jQuery

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

所有的功勞都歸Xian 。




我相信你可以這樣做:

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





Links