检查是否已使用jQuery选中复选框


1187

如何检查是否使用复选框数组的ID选中了复选框数组中的复选框?

我正在使用以下代码,但是无论ID为何,它始终返回已选中复选框的数量。

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

一个复选框阵列?从来没有听说过这样的事情。那是JQuery特有的东西,还是插件/小部件?
Pekka 2010年

2
复选框数组的含义如下:<input type =“ checkbox” name =“ chk []” id =“ chk []” value =“ apple”> <input type =“ checkbox” name =“ chk []” id = “CHK []”的值= “香蕉”> <INPUT TYPE = “复选框”名称= “CHK []” ID = “CHK []”的值= “橙色”>等。
杰克

2
复选框数组有什么问题?您还将如何进行“检查所有适用项”输入?
尼克

5
确保您id的是唯一的!name可以(并且应该在这种情况下)重复,但是如果您复制id!,将会发现很多奇怪的事情。= D
杰夫·鲁珀特

我必须删除“ @”才能使其正常工作。另外,您可以将最后5行缩小为1:返回(选中!= 0);
B. Clay Shannon

Answers:


688

ID在您的文档中必须唯一,这意味着您不应该这样做:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

而是删除ID,然后按名称或包含元素选择它们:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

现在是jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

对我来说,输入名称没有双引号:input [name = multiplecheck []]:已选中,谢谢!
亚历杭德罗(Alejandro Quiroz)2014年

30
$('#checkArray :checkbox:checked').length > 0;当更简单的$('#checkArray').checked作品可以在更多版本上使用时,为什么要使用?
Don Cheadle

5
@Oddman它确实起作用,只是不在jQuery对象上起作用。而不是$(elem).checked,请尝试elem.checked。
丹·威廉姆斯

1
@DanWilliams是的,但在mmcrae给出的示例中没有。
Oddman '16

第二个为我工作。谢谢!!var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
大卫·席尔瓦

2024
$('#' + id).is(":checked")

如果选中此复选框,则可以得到。

对于具有相同名称的复选框数组,您可以通过以下方式获取已选中复选框的列表:

var $boxes = $('input[name=thename]:checked');

然后遍历它们并查看已检查的内容,您可以执行以下操作:

$boxes.each(function(){
    // Do stuff here with this
});

要查找已检查的数量,您可以执行以下操作:

$boxes.length;

2
另一种方法是$('#'+id).attr('checked'),它等效于$('#' + id).is(":checked")IMO ,但更容易记住。
Zubin

85
@Zubin:请注意.attr('checked')。其行为在jQuery 1.6中已更改。它曾经返回falsetrue。现在返回undefined"checked".is(':checked')没有这个问题。
乔伊·亚当斯

1
@约翰·博克(John Boker):对这个坏话发表评论感到抱歉,但是,为什么它$('.ClassName').is(':checked')似乎不起作用,但却可以起作用$('#' + id).is(":checked")?除了一个事实,一个是通过id查找,另一个是通过类名查找。
Mike_OBrien

@Mike_OBrien问题可能是该类名称有多个复选框。is(':checked')实际上仅适用于一个元素。
John Boker

5
注意:自jQuery 1.8起,size()已弃用-改用.length
JM4 2013年

312
$('#checkbox').is(':checked'); 

如果选中此复选框,则上面的代码返回true,否则返回false。


6
当使用$(this).is(':checked');时非常有用 谢谢!
PinoyStackOverflower

这种方式有助于检查复选框是否已选中,您知道如何选择它,谢谢
奥马尔·伊萨伊

这对我有用,我以前用过, var isChecked = $('#CheckboxID').attr('checked') ? true : false; 但没有返回总是正确的值。那谢谢啦!
leiit

120

以下所有方法都很有用:

$('#checkbox').is(":checked")

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

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

建议避免使用DOMelement或内联“ this.checked”,而应在事件监听器上使用jQuery on方法。


98

jQuery代码来检查复选框是否被选中:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

或者:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

4
缺少第一个解决方案:。正确的解决方案是:if(('input[name="checkBoxName"]').is(':checked'))
阿兰迪尔

缺少美元符号($),应该为if($('input[name="checkBoxName"]').is(':checked'))
Penny Liu

第二个将永远不会运行该else块,因为即使jQuery对象不包含匹配元素,它也是“真实的”。添加.length到年底,那么你说。
异端猴子

69

要记住的有关选中属性的最重要概念是,它与选中属性不对应。该属性实际上对应于defaultChecked属性,并且应仅用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变,而选中的属性会改变。因此,确定是否选中复选框的跨浏览器兼容方法是使用属性

以下所有方法都是可能的

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

38

您可以使用此代码,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

29

根据jQuery 文档,有以下方法可以检查复选框是否被选中。让我们以一个复选框为例(检查所有示例的工作jsfiddle

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

示例1-选中

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

示例2-使用jQuery时,注意-:选中

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

示例3-使用jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

检查工作jsfiddle


26

您可以尝试以下方法:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />

这不再是一种好的处理方式,因为它attr仅反映HTML中的属性值,而不反映DOM中的属性值。看到的文档attr,它说:“要检索并改变DOM属性,如checkedselecteddisabled形式的元件的状态下,使用.prop()方法”。,和用于文档的prop地方说,“该.prop()方法应被用来组disabledchecked代替的.attr()方法“。
Heretic Monkey”,

21

您可以通过jquery使用以下任何推荐代码。

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};

20

我知道OP需要jquery,但就我而言,纯JS是答案,因此,如果像我这样的人在这里并且没有jquery或不想使用它-这是JS答案:

document.getElementById("myCheck").checked

如果选中了ID为myCheck的输入,则返回true;否则,返回false。

就那么简单。


11
这意味着$("#myCheck")[0].checked将在jQuery中工作!:D
Sancarn

10

您可以像这样简单地进行操作;

工作小提琴

的HTML

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

jQuery的

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

甚至更简单;

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

如果checkbox选中,它将返回true否则undefined


or even simpler;->$("#checkbox").checked
Don Cheadle

10

这也是我经常使用的想法:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

如果被选中,它将返回1;否则,它将返回1。否则将返回0。


7

用于演示和检查复选框的简单演示。

jsfiddle

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});

7

只是在我的示例中,情况是一个对话框,然后在关闭对话框之前先验证复选框。以上都不是,如何检查jQuery是否已选中复选框?jQuery(如果已选中该复选框)也无法正常工作。

到底

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

这样可以工作,因此先调用类,然后再调用ID。而不只是ID。这可能是由于此页面上的嵌套DOM元素引起的。解决方法在上面。


6

对于具有ID的复选框

<input id="id_input_checkbox13" type="checkbox"></input>

你可以做

$("#id_input_checkbox13").prop('checked')

您将获得truefalse作为上述语法的返回值。您可以在if子句中将其用作常规布尔表达式。


5

这样的事情可以帮助

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}

5

实际上,根据jsperf.com,DOM操作最快,然后是$()。prop(),然后是$()。is()!

以下是语法:

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

我个人更喜欢.prop()。不同于.is(),它也可以用来设置值。


4

切换复选框已选中

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})

2

使用此代码,您可以检查是否在不同的复选框组中或从多个复选框中至少选中了一个复选框。使用此功能,您不需要删除ID或动态ID。此代码使用相同的ID。

参考链接

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

基本信息:html元素ID不重复(例如:id =“ checkbox2”,id =“ checkbox3”)。这不是一个好习惯。我们可以在页面中多次使用类。
Anand Somasekhar

1

由于现在是2019年中期,因此jQuery有时会在诸如VueJS,React等方面处于倒退。这是一个纯香草Javascript加载监听器选项:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>

0

您的问题尚不清楚:您想在输入中提供“复选框数组ID”并true/false在输出中获取-这样,您将不知道选中了哪个复选框(如您的函数名所建议)。因此,下面是我的提议,isCheckedById即输入取复选框id和输出返回的内容true/false(非常简单,但您的ID不应为关键字),

this[id].checked


-7

使用下面的代码

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>

真?怎么样$(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); });
mplungjan

而且它们都是复选框,因此$("[id$='chkSendMail']:checked]")应该可以正常工作
mplungjan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.