html checked判斷 - 如何檢查jQuery中是否選中了複選框?





checkbox勾選 checkbox是否被选中 (26)


這對我有用:

/* isAgeSelected being id for checkbox */

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

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

例如,如果選中年齡複選框,則需要顯示文本框以輸入年齡,否則隱藏文本框。

但是以下代碼默認返回false

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

如何成功查詢已checked屬性?




我這樣做的方法是:

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



我決定在沒有jQuery的情況下發布關於如何做同樣事情的答案。 僅僅因為我是反叛者。

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

首先,您可以通過ID獲取這兩個元素。 然後為複選框的onchange事件分配一個函數,該函數檢查復選框是否已被選中並適當地設置age文本字段的hidden屬性。 在該示例中使用三元運算符。

這是一個fiddle ,你可以測試它。

附錄

如果跨瀏覽器兼容性是一個問題,那麼我建議將CSS display屬性設置為noneinline

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

較慢但跨瀏覽器兼容。




這對我有用:

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

其中isAgeSelected是控件的id。

另外,@ karim79的answer很好。 我不確定在我測試時我錯過了什麼。

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




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



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

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




用這個:

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

如果選中該複選框,則長度大於零。




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

理想情況下,您希望將代碼放入change事件處理程序,例如每次更改複選框的值時都會觸發它(與其執行方式無關)。

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

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



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

使用新屬性方法:

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



最佳答案並沒有為我做。 這確實如此:

<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(這是複選框)。 如果它然後fadeIn #saveForm元素,如果沒有fadeOut saveForm元素。




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

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




使用:

<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




您可以使用此代碼:

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



jQuery 1.6+

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

jQuery 1.5及以下版本

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

任何版本的jQuery

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

所有的功勞都歸功於Xian 。




雖然您已經針對您的問題提出了JavaScript解決方案(在checkbox時顯示textbox ),但這個問題可以通過css解決。 使用此方法,您的表單適用於已禁用JavaScript的用戶。

假設您有以下HTML:

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

您可以使用以下CSS來實現所需的功能:

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

對於其他場景,您可能會想到適當的CSS選擇器。

這是一個演示這種方法的小提琴




如何成功查詢已檢查的屬性?

複選框DOM元素的checked屬性將為您提供元素的已checked狀態。

鑑於您現有的代碼,您可以這樣做:

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

但是,使用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>




從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'))

檢查示例或文檔:




切換:0/1否則

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



我相信你可以這樣做:

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



我認為這將是一個簡單的

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



1)如果你的HTML標記是:

<input type="checkbox"  />

attr使用:

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

如果使用道具:

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

2)如果你的HTML標記是:

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

attr使用:

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

使用的道具:

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



如果您使用的是jquery的更新版本,則必須使用.prop方法來解決您的問題:

$('#isAgeSelected').prop('checked')如果選中則返回true ,如果未選中則返回false 。 我確認了,我之前遇到過這個問題。 $('#isAgeSelected').attr('checked')$('#isAgeSelected').is('checked')返回undefined ,這不是一個值得回答的情況。 如下所示。

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

希望它有所幫助:) - 謝謝。




我遇到了完全相同的問題。 我有一個ASP.NET複選框

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

在jQuery代碼中,我使用以下選擇器來檢查是否選中了複選框,它似乎像魅力一樣工作。

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

我相信你也可以使用ID而不是CssClass,

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

我希望這可以幫助你。




我正在使用這個,這是非常好的工作:

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

注意:如果選中該複選框,則返回true,否則為undefined,因此最好檢查“TRUE”值。




這將選擇具有指定屬性的元素,其值包含給定的子字符串“ckbItem”:

$('input[name *= ckbItem]').prop('checked', true);

它將在其name屬性中選擇包含ckbItem的所有元素。





jquery html dom checkbox