如何检查jQuery中是否选中了复选框？

Question

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

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

但false默认情况下返回以下代码:

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

我如何成功查询该checked属性？

Answer 1

如何成功查询已检查的属性？

checked复选框DOM元素的属性将为您提供元素的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>

Answer 2

使用jQuery的is()函数:

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

Answer 3

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

Answer 4

jQuery 1.6+

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

jQuery 1.5及以下版本

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

任何版本的jQuery

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

所有的功劳都归功于西安.

Answer 5

我正在使用这个,这是完全正常的:

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

注意:如果选中该复选框,则返回true,否则为undefined,因此最好检查"TRUE"值.

Answer 6

使用:

<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

Answer 7

从jQuery 1.6开始,行为发生jQuery.attr()了变化,鼓励用户不要使用它来检索元素的检查状态.相反,你应该使用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")

Answer 8

这对我有用:

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

isAgeSelected控件的id 在哪里.

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

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

Answer 9

如果您使用的是jquery的更新版本,则必须先找到.prop解决问题的方法:

$('#isAgeSelected').prop('checked')true如果选中并且false未选中则返回.我确认了,我之前遇到过这个问题.$('#isAgeSelected').attr('checked')并且$('#isAgeSelected').is('checked')正在返回undefined,这不是一个值得回答的情况.如下所示.

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

希望它有所帮助:) - 谢谢.

Answer 10

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

理想情况下,你会希望把你的代码放到一个change事件处理程序,例如它被激发每个复选框的值发生改变时(独立的如何它这样做).

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

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

Answer 11

使用:

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

如果您希望只有在取消选中时才需要执行必要的操作,这可能会有所帮助.

Answer 12

您可以尝试使用changecheckbox 事件来跟踪:checked状态变化。

$("#isAgeSelected").on('change', function() {
  if ($("#isAgeSelected").is(':checked'))
    alert("checked");
  else {
    alert("unchecked");
  }
});

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

Answer 13

我决定在没有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事件分配一个函数,该函数检查是否选中了复选框并hidden适当地设置了年龄文本字段的属性.在该示例中使用三元运算符.

这是一个小提琴,你可以测试它.

附录

如果跨浏览器兼容性是一个问题,那么我建议将CSS display属性设置为none和inline.

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

较慢但跨浏览器兼容.

Answer 14

我相信你可以这样做:

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

Answer 15

我遇到了完全相同的问题.我有一个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 { ... }

我希望这可以帮助你.

Answer 16

有很多方法可以检查是否选中了复选框:

使用jQuery检查的方法

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

检查示例或文档:

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

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

Answer 17

您可以使用此代码:

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

Answer 18

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

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

Answer 19

这对我有用:

/* isAgeSelected being id for checkbox */

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

Answer 20

用这个:

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

如果选中该复选框,则长度大于零.

Answer 21

我这样做的方法是:

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

Answer 22

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

true如果检查输入,则返回,false如果不是,则返回.

Answer 23

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

Answer 24

您可以使用:

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

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

他们两个都应该工作.

Answer 25

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"

Answer 26

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

<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')函数检查元素#agree(这是复选框).如果它然后fadeIn #saveForm元素,如果不是fadeOut saveForm元素.

Answer 27

此示例适用于按钮.

请尝试以下方法:

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

Answer 28

我用这个:

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

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

Answer 29

虽然你已经为你的问题提出了一个JavaScript解决方案(显示a textbox的checkbox时间checked),但这个问题可以通过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选择器.

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

Answer 30

在单击时对选中或未选中的复选框进行操作。

$('#customCheck1').click(function() {
  if (this.checked) {
    console.log('checked');
  } else {
    console.log('un-checked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="customCheck1">

编辑：if (boolean == true)虽然.checked属性也可能返回其他类型变量，但这不是一个很好的编程表达式。

最好.prop("checked")改用。它返回true且false仅。

Answer 31

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

Answer 32

我确定这不是一些启示,但我没有在一个例子中看到它:

所有选中复选框的选择器(在页面上):

$('input[type=checkbox]:checked')

Answer 33

我认为这将是一个简单的

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

Answer 34

包含本地文件系统中的jQuery.我使用了谷歌的CDN,还有很多可供选择的CDN.

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

只要mycheck单击类中的复选框,代码就会执行.如果选中当前单击的复选框,则会禁用所有其他复选框并启用当前复选框.如果未选中当前的那个,它将再次启用所有复选框以进行重新检查.

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

简单的形式来测试

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

输出屏幕:

Answer 35

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

要么

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

Answer 36

我在Firefox 9.0.1中验证了以下内容可用于捕获复选框更改后的状态:

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

Answer 37

checkedan 的属性input type="checkbox"与defaultChecked属性映射,而不是与checked属性映射.

因此,当在uncheked上选中复选框时在页面中执行某些操作时,请改用该prop()方法.它获取属性值并随着复选框状态的变化而更改.

在这些情况下使用attr()或getAttribute(在纯JavaScript中)并不是正确的做事方式.

如果elem是相关的复选框,然后做这样的事情来获取值:

elem.checked

要么

$(elem).prop('checked')

Answer 38

自动化

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

阿贾克斯

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

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

Answer 39

请尝试下面的代码来检查复选框是否被选中

$(document).ready(function(){

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

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

   });

});

Answer 40

$(document).on("click","#isAgeSelected",function(){
  if($(this).prop("checked") == true){
    $("#txtAge").show();
  }
  else if($(this).prop("checked") == false){
    $("#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">
<input type="text" name="age" placeholder="Please enter age" />
</div>

Answer 41

这是我认为我需要有效执行此类操作的最少量代码.我发现这种方法很有用; 它返回一个选中的复选框数组,然后你可以使用它们的值(这个解决方案使用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 + ", ";
};

打印"输出"将为您提供逗号分隔的值列表.

Answer 42

我遇到了同样的问题,并且没有任何发布的解决方案似乎工作,然后我发现这是因为ASP.NET将CheckBox控件呈现为内置INPUT的SPAN,因此CheckBox ID实际上是SPAN的ID,而不是INPUT,所以你应该使用:

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

然后上面列出的所有方法都应该有效.

Answer 43

这是一个示例,包括初始化 show/hide以匹配页面加载时复选框的状态; 考虑到firefox 在刷新页面时会记住复选框的状态这一事实,但不会记住显示/隐藏元素的状态.

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

(在这个问题的其他答案的帮助下)

Answer 44

只需像下面一样使用它

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

Answer 45

使用纯JavaScript:

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

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

Answer 46

这是我的解决方法:

$('#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");
    }
});

Answer 47

使用:

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

当您选择脱离上下文时,请记住您需要[0]才能访问该复选框.

Answer 48

二传手:

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

消气:

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

Answer 49

我实际上会优先考虑这个change事件.

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

演示小提琴

Answer 50

试试这个,

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

Answer 51

选择器返回多个对象,它必须采用数组中的第一个项:

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


// Result boolen
var ischecked=chckremember[0].checked;

Answer 52

我正在使用jQuery 1.11.1,我也有设置和读取复选框值的麻烦.

我终于用这两个函数解决了它:

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

它可能看起来有点脏,但它解决了我在不同类型的浏览器中遇到的所有有线问题.

Answer 53

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

Answer 54

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

    if($(this).is(":checked")){

       $('#txtAge').hide();
    }
    else
    {
        $('#txtAge').hide();
    }
});

Answer 55

您可以尝试以下代码：

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

Answer 56

嗨，您可以使用 plain Javascript，如下所示：

document.getElementById('checkboxOption').addEventListener('click',      
   event => console.log(event.target.checked)
);

<label><input type="checkbox" id="checkboxOption">Check Option</label>