检查是否使用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;}}
2501028 次浏览
$('#' + id).is(":checked")

如果选中复选框,则会得到。

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

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

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

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

要查看您可以执行的检查次数:

$boxes.length;

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;
$('#checkbox').is(':checked');

如果选中复选框,上述代码返回true,如果未选中,则返回false。

你可以试试这个:

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

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

以下所有方法都可以

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

这样的东西能帮上忙

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

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

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

根据jQuery留档,有以下方法可以检查复选框是否被选中。例如,让我们考虑一个复选框(检查所有示例的工作js fiddle

<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 is,注意-:选中

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

检查工作js fiddle

对于具有id的复选框

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

你可以简单地做

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

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

切换复选框选中

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

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

你可以简单地像这样做;

工作小提琴

超文本标记语言

<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

使用下面的代码

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

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

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

您可以使用此代码,

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

在我的例子中,这种情况是一个对话框,然后在关闭对话框之前验证复选框。上面和如何检查一个复选框是否在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元素导致了问题。解决方法在上面。

以下所有方法都很有用:

$('#checkbox').is(":checked")
$('#checkbox').prop('checked')
$('#checkbox')[0].checked
$('#checkbox').get(0).checked

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

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

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

或者:

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

使用此代码,您可以检查是否在不同的复选框组或多个复选框中选择了至少一个复选框。使用它,您不能要求删除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>

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

document.getElementById("myCheck").checked

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

就这么简单。

由于现在是2019年年中,jQuery有时会退居VueJS、React等后面。这是一个纯香草Javascript onload侦听器选项:

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

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

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

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

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

this[id].checked

function isCheckedById(id) {return this[id].checked;}


// TEST
function check() {console.clear()console.log('1',isCheckedById("myCheckbox1"));console.log('2',isCheckedById("myCheckbox2"));console.log('3',isCheckedById("myCheckbox3"));}
<label><input id="myCheckbox1" type="checkbox">check 1</label><label><input id="myCheckbox2" type="checkbox">check 2</label><label><input id="myCheckbox3" type="checkbox">check 3</label><!-- label around inputs makes text clickable --><br><button onclick="check()">show checked</button>

$(document).on('click','#checkBoxId',function(){var isChecked = $(this).is(':checked');console.log(isChecked);});

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

试试这个…

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