html js checkbox选中 - 如何检查jQuery中是否选中了复选框?





15 Answers

使用jQuery的is()函数:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
jquery设置checkbox选中 checkbox是否选中 checkbox选中事件

我需要检查复选框的checked属性,并使用jQuery基于checked属性执行操作。

例如,如果选中年龄复选框,则需要显示文本框以输入年龄,否则隐藏文本框。

但是以下代码默认返回false

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

如何成功查询已checked属性?




jQuery 1.6+

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

jQuery 1.5及以下版本

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

任何版本的jQuery

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

所有的功劳都归功于Xian 。




使用:

<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




这对我有用:

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

其中isAgeSelected是控件的id。

另外,@ karim79的answer很好。 我不确定在我测试时我错过了什么。

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




对checkbox属性使用Click事件处理程序是不可靠的,因为checked属性可以在事件处理程序本身的执行期间更改!

理想情况下,您希望将代码放入change事件处理程序,例如每次更改复选框的值时都会触发它(与其执行方式无关)。

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

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



我相信你可以这样做:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#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 { ... }

我希望这可以帮助你。




这是做同样事情的一些不同方法:

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




您可以使用此代码:

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



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



您可以使用:

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

他们都应该工作。




最佳答案并没有为我做。 这确实如此:

<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元素。




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



虽然您已经针对您的问题提出了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选择器。

这是一个演示这种方法的小提琴




if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

要么

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



Related