Question

让我们从头开始...... 我在表格中有复选框，它们有独特的价值。

例如：

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

我是否需要使用更改事件来跟踪用户行为？

Answer 1

您必须更新checkboxex的已更改数组，将公共类分配给复选框以简单有选择地进行选择。

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

Answer 2

您可以使用此

的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);
   });
});

Answer 3

您也可以这样做，这将通过取消选中复选框从数组中删除元素。

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

Answer 4

我确信有更好的方法可以做到这一点，但是这里有一些代码可以快速地汇总到一起，对你有用。

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

Answer 5

你可以试试这个：

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

希望这对你有所帮助。

如何在取消选中后获取所有选中的复选框

5 个答案:

Fiddle