blocks|key|4120809|text|属性id应唯一。您可以使用数组而不是字符串变量。然后，只需根据复选框状态添加或删除项目：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4120810|​|4120811|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(','));
});|code-block|syntax|javascript|4120812|<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|4120813|4120814|entityMap^0|2|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Attribute <code>id</code> should be unique. You can use an array instead of string variable. Then simply add or remove item based on the check box status:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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(','));
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="checkbox" value="55" id=""&gt;55
&lt;input type="checkbox" value="65" id=""&gt;65
&lt;input type="checkbox" value="75" id=""&gt;75
&lt;input type="checkbox" value="85" id=""&gt;85
&lt;input type="checkbox" value="95" id=""&gt;95</code></pre>
</div>
</div>
</p>


blocks|key|4120892|text|如果选择顺序不重要，可以在每次更改时将选中的值map()到新数组中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4120893|您的字符串连接方法没有考虑取消选中之前选中的输入|4120894|​|4120895|$(':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})
})|code-block|syntax|javascript|4120896|<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"+>|4120897|4120898|请注意，ID在页面中必须是唯一的|4120899|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/map/^0|N|5|N|5|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1C|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>If selection order isn't important can <a href="https://api.jquery.com/map/" rel="nofollow noreferrer"><code>map()</code></a> the checked values to new array every change</p>

<p>Your string concatenation approach doesn't take into account unchecking a previously checked input</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(':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 $('&lt;label&gt;',{text:this.value})
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="checkbox" value="55" &gt;
&lt;input type="checkbox" value="65" &gt;
&lt;input type="checkbox" value="75"&gt;
&lt;input type="checkbox" value="85" &gt;
&lt;input type="checkbox" value="95" &gt;</code></pre>
</div>
</div>
</p>

<p>Note that ID's must be unique in a page</p>


blocks|key|4120932|text|首先，不要在页面上使用多个相同的id，id在整个页面上应该是唯一的，请尝试使用数据属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4120933|​|4120934|$("input[type='checkbox']").change(function(){
++++var+x+=+"";
++++$("[data-id=myId]").each(function(){
++++++if(this.checked){
	++++x+=+x+%2B+$(this).val()+%2B+",";
++++++}
++++});
++++console.log(x);

});|code-block|syntax|javascript|4120935|<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">|4120936|4120937|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>First of all don't use multiple same ids on your page, id should be unique on entire page, try data attributes instead</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("input[type='checkbox']").change(function(){
    var x = "";
    $("[data-id=myId]").each(function(){
      if(this.checked){
	    x = x + $(this).val() + ",";
      }
    });
    console.log(x);

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="checkbox" value="55" data-id="myId"&gt;
&lt;input type="checkbox" value="65" data-id="myId"&gt;
&lt;input type="checkbox" value="75" data-id="myId"&gt;
&lt;input type="checkbox" value="85" data-id="myId"&gt;
&lt;input type="checkbox" value="95" data-id="myId"&gt;</code></pre>
</div>
</div>
</p>


<p>I have a list of check boxes with different values. </p>

<pre><code>&lt;input type="checkbox" value="55" id="myId"&gt;
&lt;input type="checkbox" value="65" id="myId"&gt;
&lt;input type="checkbox" value="75" id="myId"&gt;
&lt;input type="checkbox" value="85" id="myId"&gt;
&lt;input type="checkbox" value="95" id="myId"&gt;
</code></pre>

<p>When I'm getting those values using js that will take only <code>value=55</code> only. It is due to the same <code>id="myId"</code></p>

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

<p>When run that will load only <code>55</code> values like-: <code>55,55,55,55</code></p>


How to get multiple checkboxes values using id

我有一个具有不同值的复选框的列表。<input type="checkbox" value="55" id="myId"><input type="checkbox" value="65" id="myId"><input type="checkbox" value="75" id="myId"><input type...

问如何使用id获取多个复选框值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用id获取多个复选框值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用id获取多个复选框值
EN