Javascript 如何找到复选框选中输入的长度？

我只想找到选中复选框的

长度

• 在我的

  CodePen

  中，我已经创建了样本引用，我可以在点击

  复选框时找到长度，我确切看到的是当点击
  所有输入时，所有复选框都应该被选中
  

• 例如：当

  单击（或）选中
  玫瑰输入复选框时，长度的结果显示为
  1
  ，因此当我们
  单击（或）选中
  所有输入
  复选框时，预期结果应为
  4
  ，当单击
  所有复选框时
  输入
  玫瑰，白色，蓝色
  需要检查
  

• 单击一个输入复选框时如何操作其他复选框需要选中

Html:

<div id="checkboxlength" class="css">

  <div class="blue">
    <input type="checkbox"><span>All</span>
  </div>

<div>
<input type="checkbox" ><span>rose</span>
 </div>

 <div>
   <input type="checkbox" ><span>blue</span>
   </div>


<div>
   <input type="checkbox"><span>white</span>
    </div>

<div class="green">
   <span  id="count-checked-checkboxes">0</span> checked
    </div>

</div>

    $(document).ready(function(){

    var $checkboxes = $('#checkboxlength  input[type="checkbox"]');

    $checkboxes.change(function(){
        var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        $('#count-checked-checkboxes').text(countCheckedCheckboxes);

        $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
    });

});

checkboxlength

<div>
     <span  id="count-checked-checkboxes">0</span> checked
    </div>

ID:

<div id="checkboxlength" class="css">

  <div class="blue">
    <input type="checkbox"><span>All</span>
  </div>

<div>
<input type="checkbox" ><span>rose</span>
 </div>

 <div>
   <input type="checkbox" ><span>blue</span>
   </div>


<div>
   <input type="checkbox"><span>white</span>
    </div>

<div class="green">
   <span  id="count-checked-checkboxes">0</span> checked
    </div>

</div>

    $(document).ready(function(){

    var $checkboxes = $('#checkboxlength  input[type="checkbox"]');

    $checkboxes.change(function(){
        var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        $('#count-checked-checkboxes').text(countCheckedCheckboxes);

        $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
    });

});

checkboxlength

<div>
     <span  id="count-checked-checkboxes">0</span> checked
    </div>

结果代码：

<div id="checkboxlength" class="css">

  <div class="blue">
    <input type="checkbox"><span>All</span>
  </div>

<div>
<input type="checkbox" ><span>rose</span>
 </div>

 <div>
   <input type="checkbox" ><span>blue</span>
   </div>


<div>
   <input type="checkbox"><span>white</span>
    </div>

<div class="green">
   <span  id="count-checked-checkboxes">0</span> checked
    </div>

</div>

    $(document).ready(function(){

    var $checkboxes = $('#checkboxlength  input[type="checkbox"]');

    $checkboxes.change(function(){
        var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        $('#count-checked-checkboxes').text(countCheckedCheckboxes);

        $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
    });

});

checkboxlength

<div>
     <span  id="count-checked-checkboxes">0</span> checked
    </div>

0已检查

全部的
玫瑰
蓝色
白色
0已检查
函数切换（源）{
var checkbox=document.querySelectorAll（'input[type=“checkbox”]”）；
对于（变量i=0；i

使用

$（文档）.ready（函数（）{
$（“#全部”）。单击（函数（）{
$（'input[type=“checkbox”]'）.prop（'checked'），$（this.prop（'checked'））；
});
});
$（文档）.on（'change'，function（）{
$（'#计数复选框'）.html（$（'input[type=“checkbox”]：checked'）.length）
})

.css{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
格林先生{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

全部的
玫瑰
蓝色
白色
0已检查

试试这个

$（文档）.ready（函数（）{
var$checkbox=$（'#checkboxlength输入[type=“checkbox”]”）；
$（“#全部”）。单击（函数（）{
$（'input:checkbox'）.not（this.prop（'checked'，this.checked））；
});
$checkbox.change（函数（）{
var countcheckedcheckbox=$checkbox.filter（“：checked”）.length；
$（“#计数复选框”）.text（计数复选框）；
$（“#编辑计数复选框”）.val（计数复选框）；
});
});
.css{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
格林先生{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

全部的
玫瑰
蓝色
白色
0已检查
您可以使用

变量计数=$（“[type='checkbox']：选中”）。长度
 您可以将
Id
或
class
添加到
check all
复选框中，这样您可以在计数选中的复选框时消除它，也可以在单击时检测它，以便您可以选中/取消选中其他复选框


var$checkbox=$（'#checkboxlength输入[type=“checkbox”]”）；
$checkbox.change（函数（）{
/*如果单击的复选框已选中所有id
如果选中此复选框，则选中所有其他复选框
反之亦然*/
if（$（this）.is（“#check_all”））
$checkbox.prop（'checked'），$（this.prop（'checked'）；
$（“#计数复选框”）.text（$checkbox.filter（“：checked”）.length）；
});
.css{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
格林先生{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

全部的
玫瑰
蓝色
白色
0已检查
希望这有助于：


$（文档）.ready（函数（）{
var$checkbox=$（'#checkboxlength输入[type=“checkbox”]”）；
$checkbox.change（函数（）{
if（$（this.parent（）.hasClass（'blue'））
{
$（“输入：复选框”）.prop（“选中”，this.checked）；
$（“#计数复选框”）.text（$（“：选中”）.length>0？$（“：选中”）.length-1:0）；
}
其他的
{
var countcheckedcheckbox=$checkbox.filter（“：checked”）.length；
$（“#计数复选框”）.text（计数复选框）；
$（“#编辑计数复选框”）.val（计数复选框）；
}
});
});

全部的
玫瑰
蓝色
白色
0已检查
您可以只为“All”复选框添加一个类，然后将JS分离为两个可用函数
countChecked（）
和
toggleAll（）
。以下是片段：

**HTML:

document.querySelectorAll（'input[type=“checkbox”]：checked'）。length
希望这项工作谢谢你的帮助我得到了答案我给你投票谢谢…我认为包括“All”复选框作为复选框是不值得的我是关于同样的评论，一些用户投票反对只是为了引起对他们答案的注意。。不公平那是真的对不起，我没看懂这个问题，要放弃你的想法，你能编辑这篇文章吗？我的投票一直被阻止，直到编辑。嘿，谢谢大家
Amani
答案工作得很好。谢谢你们的帮助。谢谢你们的答案。你们的答案是基于如下文本的：-.next（'span'）。text（）=“All”），所以你们能在没有
id
或
value
等文本的情况下修复它吗？。。。。我只是在寻找你的答案，请将其固定为id或值谢谢你的帮助我得到了答案我给你投票谢谢…。@R.ManiSelvam更新了上述代码以检查类
blue
，而不是“Span>All”。代码已更改为
if（$（this）.parent（）.hasClass（'blue'））
。谢谢你的帮助我得到了答案我给你投票谢谢你的帮助我得到了答案。。。