Question

我有一个具有不同值的复选框列表。

<input type="checkbox" value="55" id="myId">
<input type="checkbox" value="65" id="myId">
<input type="checkbox" value="75" id="myId">
<input type="checkbox" value="85" id="myId">
<input type="checkbox" value="95" id="myId">

当我使用js获取这些值时，它们仅需要value=55。这是由于相同的id="myId"

var x = "";
$("input[type='checkbox']").change(fucntion(){ 
   if(this.checked){
     x = x+","+x;
   }
});

运行时将仅加载{-{1}}这样的55值

Answer 1

属性id应该是唯一的。您可以使用数组而不是字符串变量。然后只需根据复选框状态添加或删除项目：

var x = [];
$("input[type='checkbox']").change(function(){
  if(this.checked){
    x.push(this.value);
  }
  else {
    var index = x.indexOf(this.value);
    x.splice(index, 1);
  }
  console.log(x.join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" id="">55
<input type="checkbox" value="65" id="">65
<input type="checkbox" value="75" id="">75
<input type="checkbox" value="85" id="">85
<input type="checkbox" value="95" id="">95

Answer 2

如果选择顺序不重要，每次更改都会map()将检查的值保存到新数组中

您的字符串连接方法没有考虑取消选中先前检查过的输入

$(':checkbox').change(function(){
   var vals = $(':checkbox:checked').map(function(){
       return this.value
   }).get()
   console.log(vals.join())
})
// insert values as text for demo
.wrap(function(){
   return $('<label>',{text:this.value})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" >
<input type="checkbox" value="65" >
<input type="checkbox" value="75">
<input type="checkbox" value="85" >
<input type="checkbox" value="95" >

请注意，ID在页面中必须是唯一的

Answer 3

首先不要在页面上使用多个相同的ID，ID在整个页面上应该是唯一的，请尝试使用数据属性

$("input[type='checkbox']").change(function(){
    var x = "";
    $("[data-id=myId]").each(function(){
      if(this.checked){
	    x = x + $(this).val() + ",";
      }
    });
    console.log(x);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" data-id="myId">
<input type="checkbox" value="65" data-id="myId">
<input type="checkbox" value="75" data-id="myId">
<input type="checkbox" value="85" data-id="myId">
<input type="checkbox" value="95" data-id="myId">

如何使用ID获取多个复选框值

3 个答案: