如何在取消选中所有选中的复选框后获取这些复选框
How to get all the selected checkboxes after they got unchecked
让我们从头开始。。。我在表中有复选框,它们有唯一的VALUES。
例如:
<input type="checkbox" value="2">
<input type="checkbox" value="3">
我想要一个数组,它将添加和删除列表中的所有复选框,这取决于用户是否选中了这些复选框(仅点击事件),因为在某些情况下,我会重置所有的复选框,并且我只想在用户点击它时保存值。
到目前为止,我已经尝试过了,但我的代码没有达到我需要的效果,因为当用户检查和取消检查两次或两次以上时,这会给我一个双值。。。
var selected = new Array();
$('tr td input:checked').each(function() {
selected.push($(this).attr('value'));
console.log(selected);
});
我需要使用更改事件来跟踪用户行为吗?
您必须在checkboxex的checked更改上更新数组,将公共类分配给checkbox以使选择简单而有选择。
HTML
<input type="checkbox" value="2" class="chk" />
<input type="checkbox" value="3" class="chk" />
Javascript
var selected;
$('.chk').change(function(){
selected = new Array();
$('tr td input:checked').each(function() {
selected.push($(this).attr('value'));
console.log(selected);
});
您可以使用此的click()处理程序
var selected = new Array();
$(':checkbox').click(function(){
selected.splice(0, selected.length); // emptying last array so to avoid multiple values
$('tr td input:checked').each(function() {
selected.push($(this).attr('value'));
console.log(selected);
});
});
您也可以这样做,这将通过取消选中复选框从数组中删除元素。。
var selected = new Array();
$('input:checkbox').change(function() {
if(this.checked)
selected.push($(this).attr('value'));
else
selected.splice(selected.indexOf(this.value),1);
console.log(selected);
});
Fiddle
我相信有更好的方法可以做到这一点,但这里有一些快速拼凑的代码应该对您有效。
<html>
<head>
<script>
var chkArray = [];
function addCheckBox() {
var chk1 = document.getElementById('1').checked;
var chk2 = document.getElementById('2').checked;
var chk3 = document.getElementById('3').checked;
var chk4 = document.getElementById('4').checked;
if(chk1 == true && chkArray.indexOf(1) == -1) {
chkArray.push(1);
alert('Added 1');
}else if(chk2 == true && chkArray.indexOf(2) == -1) {
chkArray.push(2);
alert('Added 2');
}else if(chk3 == true && chkArray.indexOf(3) == -1) {
chkArray.push(3);
alert('Added 3');
}else if(chk4 == true && chkArray.indexOf(4) == -1) {
chkArray.push(4);
alert('Added 4');
}
}
</script>
</head>
<body onClick="addCheckBox();">
<input type="checkbox" value="2" id="1">
<input type="checkbox" value="3" id="2">
<input type="checkbox" value="4" id="3">
<input type="checkbox" value="5" id="4">
</body>
</html>
你可以试试这个:
HTML:
<input type="checkbox" name="test[]" value="1"/>
<input type="checkbox" name="test[]" value="2"/>
<input type="checkbox" name="test[]" value="3"/>
JS:
var recorder = [];
$('input[type="checkbox"]').change(function(){
var checkboxs = document.getElementsByName("test[]");
recorder=new Array();
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
recorder.push(checkboxs[i].value);
}
}
console.log(recorder);
});
和JSfiddle DEMO
希望这对你有帮助。
相关文章:
- 从复选框和Selects-KnockoutJS中获取值的总和
- 如何从javascript/jquery中的复选框中获取布尔值
- 如何从javascript/jquery中的多个复选框中获取附加值
- 如何从多个复选框中获取最后一个值
- 如何获取模式引导程序上的值复选框
- 如何获取所有选中复选框的所有值,然后将其提交到表单中
- 如何在javascript中获取一组复选框值
- 如何创建php函数或任何脚本/jquery Javascript,使我能够获取与复选框关联的值并添加它们
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 如何根据在角度 js 中选中的复选框获取表行值
- 根据选中的复选框获取
的值 - 从行中的复选框获取表值
- 如何通过JQuery中的复选框获取选定列的值
- PHP:基于复选框获取工作日和休息日
- 在jquery中不能从表单复选框获取和传递值到$_POST
- 通过ng-repeat, ng-model和复选框获取数组中的位置
- 单击复选框获取表格行id值
- 如何在Angular JavaScript中使用复选框获取动态JSON数据
- Javascript:从复选框获取对象
- 使用复选框获取行值