Fatal编程技术网
  • javascript/
  • Javascript 检查是否使用jQuery选中了复选框

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

javascript jquery html checkbox

Javascript 检查是否使用jQuery选中了复选框,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,如何使用复选框数组的id检查是否选中了复选框数组中的复选框 我正在使用下面的代码，但是不管id如何，它总是返回复选框的计数 函数isCheckedById（id）{ 警报（id）； 选中的变量=$（“输入[@id=“+id+”]：选中”）。长度； 警报（已选中）； 如果（选中==0）{ 返回false； }否则{ 返回true； } } 如果选中该复选框，则获取 对于具有相同名称的复选框数组，您可以通过以下方式获取复选框列表： var $boxes = $('input[name=thenam

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

我正在使用下面的代码，但是不管id如何，它总是返回复选框的计数

函数isCheckedById（id）{
警报（id）；
选中的变量=$（“输入[@id=“+id+”]：选中”）。长度；
警报（已选中）；
如果（选中==0）{
返回false；
}否则{
返回true；
}
}
如果选中该复选框，则获取

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

var $boxes = $('input[name=thename]:checked');
然后，要循环检查它们并查看已检查的内容，您可以执行以下操作：

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

$boxes.length;
要查找已检查的数量，您可以执行以下操作：

$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" />
如果复选框被选中，上述代码将返回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" />


函数checkAllCheckBox（值）
{
如果（$（'#全选''）。为（':checked'））{
$（.check).attr（“checked”、“checked”）；
}
其他的
{
$（.check).removeAttr（'checked'）；
}
}
关于选中属性，要记住的最重要的概念是 它与选中的属性不对应。属性 实际上对应于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 );
        }
    }
}
用于检查和设置复选框的简单演示

!

根据jQuery，有以下方法可以检查复选框是否被选中。让我们考虑一个复选框，例如（检查所有示例的工作）

示例2-使用jQuery时，注意-：已选中

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

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.");
    }
});
选中工作

中带有id的复选框

<input id="id_input_checkbox13" type="checkbox"></input>
您将获得
true
或
false
作为上述语法的返回值。您可以在if子句中将其用作普通布尔表达式。

选中切换复选框

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
实际上，根据，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（）
不同，它还可以用来设置值。

您可以像

HTML

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

$(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");
如果选中
复选框
，它将返回
true
，否则
未定义

使用下面的代码

<script>

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

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


$（文档）.ready（函数（）{
$（“[id$='chkSendMail']”）attr（“onchange”，“ShowMailSection（）”）；
}
函数ShowMailSection（）{
如果（$（“[id$='chkSendMail'][type='checkbox']：选中”）.length>0）{
$（“[id$='SecEmail']”）。removeClass（“隐藏”）；
}
您可以使用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.
}
在我的示例中，情况是一个对话框，然后在关闭对话框之前验证该复选框。上述和都不起作用

到头来

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


var fd=$（'.cb#fd'）。是（':checked'）；
var rd=$（'.cb#rd'）。is（':checked'）；
这样做是为了调用类，然后调用ID。而不仅仅是ID。这可能是由于此页面上嵌套的DOM元素导致的问题。解决方法如上所述。

以下所有方法都很有用：

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

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

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

$('#checkbox').get(0).checked
建议避免使用DomeElement或内联“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

参考文献

复选框2
ck1

ck2

复选框3
ck3

ck4

函数checkFormData（）{
如果（！$（'input[name=checkbox2]：选中'）。长度>0）{
document.getElementById（“errMessage”）.innerHTML=“复选框2不能为空”；
返回false；
}
如果（！$（'input[name=checkbox3]：选中'）。长度>0）{
document.getElementById（“errMessage”）.innerHTML=“复选框3不能为空”；
返回false；
}
警惕（“成功”）；
返回true；
}
我知道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>


//将变量和ID的“admincheckbox”替换为适合的名称。
window.onload=函数（）{
const admincheckbox=document.getElementById（“admincheckbox”）；
admincheckbox.addEventListener（'click'，function（）{
if（admincheckbox.checked）{
警报（“已检查”）；
}否则{
警报（“未检查”）；
}
});
}
这也是我经常使用的想法：

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;
如果选中，它将返回1；否则它将返回0。

您的问题不清楚：您希望在输入时给出“checkbox array id”，在输出时获得
true/false
——这样您就不知道选中了哪个复选框（正如您的函数名所示）因此，下面是我对您的
isCheckedById
主体的建议，它在输入时选中复选框
id
，在输出时返回
true/false
（非常简单，但您的id不应该是关键字）if($('input[name="checkBoxName"]').is(':checked')) { // checked }else { // unchecked } 
if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

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

document.getElementById("myCheck").checked

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

this[id].checked

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