如何使用复选框数组的 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
$('#' + 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;
$('#checkArray').checked
可以工作并且可用于更多版本时,为什么还要使用 $('#checkArray :checkbox:checked').length > 0;
?
-
时出现错误
$('#checkbox').is(':checked');
如果复选框被选中,上面的代码返回 true,否则返回 false。
var isChecked = $('#CheckboxID').attr('checked') ? true : false;
之前使用过它,但并不总是返回正确的值。那谢谢啦!
以下所有方法都很有用:
$('#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
}
:
...正确的是:if(('input[name="checkBoxName"]').is(':checked'))
。
if($('input[name="checkBoxName"]').is(':checked'))
。
else
块,因为 jQuery 对象,即使它不包含匹配的元素,也是“真实的”。将 .length
添加到末尾,然后您正在说话。
关于 checked 属性要记住的最重要的概念是它不对应于 checked 属性。该属性实际上对应于 defaultChecked 属性,应该只用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变,而选中的属性会。因此,确定是否选中复选框的跨浏览器兼容方法是使用该属性
以下所有方法都可以
elem.checked
$(elem).prop("checked")
$(elem).is(":checked")
这也是我经常使用的一个想法:
var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;
如果检查,它将返回 1;否则它将返回 0。
您可以使用此代码,
if($("#checkboxId").is(':checked')){
// Code in the case checkbox is checked.
} else {
// Code in the case checkbox is NOT checked.
}
根据 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
我知道 OP 想要 jquery,但在我的情况下,纯 JS 是答案,所以如果像我这样的人在这里并且没有 jquery 或者不想使用它 - 这是 JS 答案:
document.getElementById("myCheck").checked
如果检查了 ID 为 myCheck 的输入,则返回 true;如果未检查,则返回 false。
就那么简单。
$("#myCheck")[0].checked
将在 jquery 中工作! :D
你可以试试这个:
<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 属性,例如表单元素的 checked
、selected
或 disabled
状态,请使用 .prop()
方法。”和 the documentation for prop
,其中它说“应该使用 .prop()
方法来设置 disabled
和 checked
而不是 .attr()
方法。”
您可以使用以下任何 jquery 推荐的代码。
if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
你可以简单地做到这一点;
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
$(document).on('click','#checkBoxId',function(){
var isChecked = $(this).is(':checked');
console.log(isChecked);
});
上面的代码也适用于引导模式。 isChecked 为 true 或 flase ;
用于检查和设置复选框的简单演示。
$('.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);
}
});
只是说在我的示例中,情况是一个对话框,然后在关闭对话框之前验证了该复选框。以上都没有,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 元素导致了此问题。解决方法如上所述。
对于带有 id 的复选框
<input id="id_input_checkbox13" type="checkbox"></input>
你可以简单地做
$("#id_input_checkbox13").prop('checked')
您将获得 true
或 false
作为上述语法的返回值。您可以在 if 子句中将其用作普通的布尔表达式。
实际上,根据 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()
不同,它也可以用来设置值。
像这样的东西可以帮助
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 );
}
}
}
切换复选框已选中
$("#checkall").click(function(){
$("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
尝试这个...
$(function(){
$('body').on('click','.checkbox',function(e){
if($(this).is(':checked')){
console.log('Checked')
} else {
console.log('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>
由于是 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>
您的问题不清楚:您想在输入时给出“复选框数组 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")); }
使用下面的代码
<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); });
怎么样
不定期副业成功案例分享
$('#'+id).attr('checked')
,它相当于$('#' + id).is(":checked")
,但更容易记住 IMO。.attr('checked')
。它的行为在 jQuery 1.6 中发生了变化。它曾经返回false
或true
。现在它返回undefined
或"checked"
。.is(':checked')
没有这个问题。$('.ClassName').is(':checked')
似乎不起作用但$('#' + id).is(":checked")
起作用?除了一个按 id 查找和一个按类名查找这一事实之外。