0

让我们从头开始......我在表格中有复选框，它们具有唯一的值。

例如：

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

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

4

5 回答 5

3

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

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);
});
于 2013-07-09T16:47:01.660 回答
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);
   });
});
于 2013-07-09T16:50:05.267 回答
1

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

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

小提琴

于 2013-07-09T16:51:34.267 回答
0

我确信有更好的方法可以做到这一点，但这里有一些代码可以快速组合在一起，应该对你有用。

<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>
于 2013-07-09T16:57:06.897 回答
0

你可以试试这个：

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

希望这对你有帮助。

于 2013-07-09T17:03:03.943 回答