ChatGPT解决这个技术问题 Extra ChatGPT

检查是否使用 jQuery 检查了复选框

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

我正在使用以下代码,但它总是返回选中复选框的计数,而不管 id 是什么。

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

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}
复选框数组的含义类似于: 等等。
复选框数组有什么问题?你会怎么做“检查所有适用的”输入?
确保您的 id 是独一无二的! name 可以(并且应该,在这种情况下)重复,但是如果您重复 id,您会发现很多奇怪的事情发生! =D
忽略之前的评论,应该是 return checked !== 0

K
Kaspar Lee
$('#' + id).is(":checked")

如果复选框被选中,就会得到。

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

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

然后遍历它们,看看你可以做什么检查:

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

要查找检查了多少,您可以执行以下操作:

$boxes.length;

另一种方式是 $('#'+id).attr('checked'),它相当于 $('#' + id).is(":checked"),但更容易记住 IMO。
@Zubin:小心 .attr('checked')。它的行为在 jQuery 1.6 中发生了变化。它曾经返回 falsetrue。现在它返回 undefined"checked".is(':checked') 没有这个问题。
@John Boker:对于 necro 评论感到抱歉,但是为什么 $('.ClassName').is(':checked') 似乎不起作用但 $('#' + id).is(":checked") 起作用?除了一个按 id 查找和一个按类名查找这一事实之外。
注意:自 jQuery 1.8 起 size() 已被弃用 - 改用 .length
$('#'+id).prop('checked') 将返回真或假。
d
depankur rawat

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;

当更简单的 $('#checkArray').checked 可以工作并且可用于更多版本时,为什么还要使用 $('#checkArray :checkbox:checked').length > 0;
@Oddman 它确实有效,只是不适用于 jquery 对象。而不是 $(elem).checked,请尝试 elem.checked。
@DanWilliams 是的,但在 mmcrae 给出的示例中没有。
@AlejandroQuiroz 我过去也不会在 jquery 选择器中省略双引号。但最近我认为它非常有用,因为它提高了代码的可读性并避免名称或类包含减号 - 时出现错误
B
Bellash
$('#checkbox').is(':checked'); 

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


使用时非常有用 $(this).is(':checked');谢谢!
这对我有用,我在 var isChecked = $('#CheckboxID').attr('checked') ? true : false; 之前使用过它,但并不总是返回正确的值。那谢谢啦!
j
justnajm

以下所有方法都很有用:

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

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

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

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

建议应避免使用 DOM 元素或内联“this.checked”,而应使用 jQuery on 方法作为事件侦听器。


J
Jefrey Sobreira Santos

用于检查复选框是否被选中的 jQuery 代码:

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

或者:

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

第一个解决方案缺少 :...正确的是:if(('input[name="checkBoxName"]').is(':checked'))
缺少美元符号 ($),它应该是 if($('input[name="checkBoxName"]').is(':checked'))
第二个永远不会运行 else 块,因为 jQuery 对象,即使它不包含匹配的元素,也是“真实的”。将 .length 添加到末尾,然后您正在说话。
T
Techie

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

以下所有方法都可以

elem.checked 

$(elem).prop("checked") 

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

L
Leniel Maccaferri

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

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

如果检查,它将返回 1;否则它将返回 0。


M
Mohammed Shaheen MK

您可以使用此代码,

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

S
Subodh Ghulaxe

根据 jQuery documentation,有以下方法可以检查复选框是否被选中。例如,让我们考虑一个复选框(检查所有示例的工作 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,注意 - :checked

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

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

检查工作jsfiddle


C
Combine

我知道 OP 想要 jquery,但在我的情况下,纯 JS 是答案,所以如果像我这样的人在这里并且没有 jquery 或者不想使用它 - 这是 JS 答案:

document.getElementById("myCheck").checked

如果检查了 ID 为 myCheck 的输入,则返回 true;如果未检查,则返回 false。

就那么简单。


这意味着 $("#myCheck")[0].checked 将在 jquery 中工作! :D
M
Muhammad Reda

你可以试试这个:

<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 中的属性值。请参阅 the documentation for attr,其中显示“要检索和更改 DOM 属性,例如表单元素的 checkedselecteddisabled 状态,请使用 .prop() 方法。”和 the documentation for prop,其中它说“应该使用 .prop() 方法来设置 disabledchecked 而不是 .attr() 方法。”
e
endur

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

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

A
Aamir Shahzad

你可以简单地做到这一点;

Working Fiddle

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
i
infomasud
$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

上面的代码也适用于引导模式。 isChecked 为 true 或 flase ;


M
Muhammad Reda

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

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

C
Community

只是说在我的示例中,情况是一个对话框,然后在关闭对话框之前验证了该复选框。以上都没有,How to check whether a checkbox is checked in jQuery?jQuery if checkbox is checked 似乎也不起作用。

到底

<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 元素导致了此问题。解决方法如上所述。


A
Aniket Thakur

对于带有 id 的复选框

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

你可以简单地做

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

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


B
BlackPanther

实际上,根据 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()不同,它也可以用来设置值。


A
Abdul Hamid

像这样的东西可以帮助

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

s
sourceboy

切换复选框已选中

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

o
oscar castellon

尝试这个...

$(function(){
  $('body').on('click','.checkbox',function(e){
    
    if($(this).is(':checked')){
      console.log('Checked')
    } else {
      console.log('Unchecked')
    }
  })
})

P
Parth Patel

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

参考Link

<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")。这不是一个好习惯。我们可以在一个页面中多次使用类。
G
Grant

由于是 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>

K
Kamil Kiełczewski

您的问题不清楚:您想在输入时给出“复选框数组 id”并在输出时获得 true/false - 这样您将不知道选中了哪个复选框(正如您的函数名称所暗示的那样)。因此,下面是我对您的 isCheckedById 正文的提议,在输入时采用复选框 id 并在输出时返回 true/false(这很简单,但您的 ID 不应该是关键字),

this[id].checked

function isCheckedById(id) { return this[id].checked; } // 测试函数 check() { console.clear() console.log('1',isCheckedById("myCheckbox1")); console.log('2',isCheckedById("myCheckbox2")); console.log('3',isCheckedById("myCheckbox3")); }


S
Sp0T

使用下面的代码

<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); });怎么样