Question

我想找到length选中的复选框。

My CodePen
在我的CodePen我创建了示例参考，我可以在点击check box时查找长度，点击ALL input {{ 1}}，应检查所有复选框。
例如：当check box上升输入复选框时，长度的结果显示为click (or) checked，因此当我们1所有输入click (or) checked时，期望的结果应该是与check box类似，点击4输入All check box需要检查。
点击一个输入复选框时如何进行其他复选框需要检查？

HTML

rose, white, blue

Java脚本：

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

ID

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

Answer 1

使用prop()

$(document).ready(function() {
  $("#all").click(function() {
    $('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
  });
});

$(document).on('change', function() {
  $('#count-checked-checkboxes').html($('input[type="checkbox"]:checked').length)
})

.css {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.green {
  color: red;
}

.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxlength" class="css">
  <div class="blue">
    <input type="checkbox" id="all"><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>

Answer 2

您可以在Id复选框中添加class或check all，这样您就可以在计算选中的复选框时消除它，并在点击时检测它，这样您就可以检查/取消选中其他复选框。

var $checkboxes = $('#checkboxlength  input[type="checkbox"]');
$checkboxes.change(function(){
    /*if the clicked checkbox has check_all id
     then check all other checkboxes if this one is checked 
     and vise versa */
    if($(this).is("#check_all"))
        $checkboxes.prop('checked',$(this).prop('checked'));
        
    $('#count-checked-checkboxes').text($checkboxes.filter(':checked').length);
});

.css{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}
.green{
  color:red;
}

.blue{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="checkboxlength" class="css">
   <div class="blue"><input type="checkbox" id="check_all"><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>

Answer 3

希望这会有所帮助：

$(document).ready(function () {
	var $checkboxes = $('#checkboxlength  input[type="checkbox"]');
	$checkboxes.change(function () {
		if ($(this).parent().hasClass('blue'))
		{
			$("input:checkbox").prop("checked", this.checked);
			$('#count-checked-checkboxes').text($(":checked").length > 0 ? $(":checked").length-1 : 0);
		}
		else
		{
			var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
			$('#count-checked-checkboxes').text(countCheckedCheckboxes);
			$('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>

Answer 4

试试这个..

＆＃13;

$(document).ready(function() {

  var $checkboxes = $('#checkboxlength  input[type="checkbox"]');
  $("#all").click(function() {
    $('input:checkbox').not(this).prop('checked', this.checked);
  });
  $checkboxes.change(function() {
    var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
    $('#count-checked-checkboxes').text(countCheckedCheckboxes);

    $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
  });

});

＆＃13;

.css {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.green {
  color: red;
}

.blue {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxlength" class="css">

  <div class="blue">
    <input type="checkbox" id="all"><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>

＆＃13;

Answer 5

您可以使用
找到所选复选框的长度 var count = $（“[type ='checkbox']：checked”）。length;

Answer 6

您只能为＆＃34; All＆＃34;添加一个班级。复选框，然后将您的JS分成两个可重用的函数countChecked()和toggleAll()。以下是片段：

** HTML：

  <div class="blue">
    <input type="checkbox" class="toggleAll"><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>

** JS：

$(document).ready(function(){

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

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

  }
  function toggleAll(checked){
    if(checked){
      $checkboxes.each(function(){
        this.checked = true;
      });
    }else{
      $checkboxes.each(function(){
        this.checked = false;
      });
    }
  }

  $('.toggleAll').on('click', function(){
     toggleAll(this.checked);
    countChecked();
  });

});

Answer 7

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

  <div class="blue">
    <input type="checkbox" onclick="toggle(this);"><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>
<script type="text/javascript">
       function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}
</script>

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

7 个答案: