blocks|key|2868965|text|适用于现代浏览器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2868966|var+checkedValue+=+document.querySelector('.messageCheckbox:checked').value;|code-block|syntax|javascript|2868967|通过使用jQuery|offset|length|style|CODE|2868968|var+checkedValue+=+$('.messageCheckbox:checked').val();|2868969|没有jQuery的纯javascript|2868970|var+checkedValue+=+null;+
var+inputElements+=+document.getElementsByClassName('messageCheckbox');
for(var+i=0;+inputElements[i];+%2B%2Bi){
++++++if(inputElements[i].checked){
+++++++++++checkedValue+=+inputElements[i].value;
+++++++++++break;
++++++}
}|2868971|entityMap^0|0|0|4|6|0|0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p><em>For modern browsers</em>:</p>

<pre><code>var checkedValue = document.querySelector('.messageCheckbox:checked').value;
</code></pre>

<p><em>By using <code>jQuery</code></em>:</p>

<pre><code>var checkedValue = $('.messageCheckbox:checked').val();
</code></pre>

<p><em>Pure javascript without <code>jQuery</code></em>:</p>

<pre><code>var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}
</code></pre>


blocks|key|220213|text|上面的方法对我都不起作用，但只需使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220214|document.querySelector('.messageCheckbox').checked;|code-block|syntax|javascript|220215|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>None of the above worked for me but simply use this:</p>
<pre><code>document.querySelector('.messageCheckbox').checked;
</code></pre>


blocks|key|2868986|text|我在我的code.Try中使用了这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2868987|var+x=$("#checkbox").is(":checked");|code-block|syntax|javascript|2868988|如果复选框被选中，则x将为true，否则将为false。|offset|length|style|CODE|2868989|entityMap^0|0|0|A|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I am using this in my code.Try this</p>

<pre class="lang-js prettyprint-override"><code>var x=$("#checkbox").is(":checked");
</code></pre>

<p>If the checkbox is checked <code>x</code> will be true otherwise it will be false.</p>


blocks|key|217061|text|在普通的javascript中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|217062|function+test()+{
++++var+cboxes+=+document.getElementsByName('mailId[]');
++++var+len+=+cboxes.length;
++++for+(var+i=0;+i<len;+i%2B%2B)+{
++++++++alert(i+%2B+(cboxes[i].checked?'+checked+':'+unchecked+')+%2B+cboxes[i].value);
++++}
}|code-block|syntax|javascript|217063|function+selectOnlyOne(current_clicked)+{
++++var+cboxes+=+document.getElementsByName('mailId[]');
++++var+len+=+cboxes.length;
++++for+(var+i=0;+i<len;+i%2B%2B)+{
++++++++cboxes[i].checked+=+(cboxes[i]+==+current);
++++}
}|217064|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>in plain javascript:</p>

<pre class="lang-js prettyprint-override"><code>function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i&lt;len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}
</code></pre>

<pre class="lang-js prettyprint-override"><code>function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i&lt;len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}
</code></pre>


blocks|key|222179|text|这不能直接回答这个问题，但可能会对未来的访问者有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222180|222181|如果您希望某个变量始终是checkbox的当前状态(而不必不断检查其状态)，则可以修改onchange事件来设置该变量。|offset|length|style|CODE|222182|这可以在HTML中完成：|222183|<input+class='messageCheckbox'+type='checkbox'+onchange='some_var=this.checked;'>|code-block|syntax|javascript|222184|或者使用JavaScript：|222185|cb+=+document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change',+function(){some_var+=+this.checked})|222186|entityMap^0|0|0|17|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|X|8|@$E|Y|F|Z|G|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|11|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|13|8|@]|9|@]|A|$N|O]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p><em>This does not directly answer the question, but may help future visitors.</em></p>

<hr>

<p>If you want to have a variable always be the current state of the checkbox (rather than having to keep checking its state), you can modify the <code>onchange</code> event to set that variable.</p>

<p>This can be done in the HTML:</p>

<pre><code>&lt;input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'&gt;
</code></pre>

<p>or with JavaScript:</p>

<pre><code>cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})
</code></pre>


blocks|key|222173|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222174|$(document).ready(function()+{
++var+ckbox+=+$("input[name='ips']");
++var+chkId+=+'';
++$('input').on('click',+function()+{
++++
++++if+(ckbox.is(':checked'))+{
++++++$("input[name='ips']:checked").each+(+function()+{
+++			chkId+=+$(this).val()+%2B+",";
++++++++chkId+=+chkId.slice(0,+-1);
+	++});
+++++++
+++++++alert+(+$(this).val()+);+//+return+all+values+of+checkboxes+checked
+++++++alert(chkId);+//+return+value+of+checkbox+checked
++++}+++++
++});
});|code-block|syntax|javascript|222175|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input+type="checkbox"+name="ips"+value="12520">
<input+type="checkbox"+name="ips"+value="12521">
<input+type="checkbox"+name="ips"+value="12522">|222176|222177|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<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>$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
 	  });
       
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="checkbox" name="ips" value="12520"&gt;
&lt;input type="checkbox" name="ips" value="12521"&gt;
&lt;input type="checkbox" name="ips" value="12522"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|222135|text|使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222136|alert($(".messageCheckbox").is(":checked").val())|code-block|syntax|javascript|222137|这假设要检查的复选框具有类"messageCheckbox"，否则必须检查输入是否为复选框类型，等等。|222138|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Use this:</p>

<pre><code>alert($(".messageCheckbox").is(":checked").val())
</code></pre>

<p>This assumes the checkboxes to check have the class "messageCheckbox", otherwise you would have to do a check if the input is the checkbox type, etc.</p>


blocks|key|222199|text|<input+class="messageCheckbox"+type="checkbox"+onchange="getValue(this.value)"+value="3"+name="mailId[]">

<input+class="messageCheckbox"+type="checkbox"+onchange="getValue(this.value)"+value="1"+name="mailId[]">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|222200|function+getValue(value){
++++alert(value);
}|222201|unstyled|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$B|C]]|$1|F|3|-4|5|G|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]"&gt;

&lt;input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]"&gt;
</code></pre>



<pre><code>function getValue(value){
    alert(value);
}
</code></pre>


blocks|key|2869080|text|当框没有被选中时，上面的所有方法都不会在控制台中抛出错误，所以我按照这些方式做了一些事情(onclick和checkbox函数仅用于演示目的，在我的用例中，它是一个更大的表单提交函数的一部分)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2869081|​|2869082|function+checkbox()+{
++var+checked+=+false;
++if+(document.querySelector('#opt1:checked'))+{
+++++checked+=+true;
++}
++document.getElementById('msg').innerText+=+checked;
}|code-block|syntax|javascript|2869083|<input+type="checkbox"+onclick="checkbox()"+id="opt1">+<span+id="msg">Click+The+Box</span>|2869084|2869085|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>None of the above worked for me without throwing errors in the console when the box wasn't checked so I did something along these lines instead (onclick and the checkbox function are only being used for demo purposes, in my use case it's part of a much bigger form submission function):</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>function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" onclick="checkbox()" id="opt1"&gt; &lt;span id="msg"&gt;Click The Box&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|217119|text|如果您使用的是Semantic+UI+React，data将作为第二个参数传递给onChange事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|217120|因此，您可以按如下方式访问checked属性：|217121|<Checkbox+label="Conference"+onChange={(e,+d)+=>+console.log(d.checked)}+/>|code-block|syntax|javascript|217122|entityMap|0|LINK|mutability|MUTABLE|url|https://react.semantic-ui.com/^0|P|4|14|8|7|H|0|0|D|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>If you're using <a href="https://react.semantic-ui.com" rel="nofollow noreferrer">Semantic UI React</a>, <code>data</code> is passed as the second parameter to the <code>onChange</code> event.</p>

<p>You can therefore access the <code>checked</code> property as follows:</p>

<pre class="lang-html prettyprint-override"><code>&lt;Checkbox label="Conference" onChange={(e, d) =&gt; console.log(d.checked)} /&gt;
</code></pre>


blocks|key|220476|text|如果您希望使用jQuery获取所有复选框的值，这可能会对您有所帮助。这将解析列表，并根据所需的结果，您可以执行其他代码。顺便说一句，出于这个目的，我们不需要用方括号[]来命名输入。我把它们关掉了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220477|++$(document).on("change",+".messageCheckbox",+function(evnt){
++++var+data+=+$(".messageCheckbox");
++++data.each(function(){
++++++console.log(this.defaultValue,+this.checked);
++++++//+Do+something...+
++++});
++});+/*+END+LISTENER+messageCheckbox+*/|code-block|syntax|javascript|220478|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to get the values of all checkboxes using jQuery, this might help you. This will parse the list and depending on the desired result, you can execute other code. BTW, for this purpose, one does not need to name the input with brackets []. I left them off.</p>
<pre><code>  $(document).on(&quot;change&quot;, &quot;.messageCheckbox&quot;, function(evnt){
    var data = $(&quot;.messageCheckbox&quot;);
    data.each(function(){
      console.log(this.defaultValue, this.checked);
      // Do something... 
    });
  }); /* END LISTENER messageCheckbox */
</code></pre>


blocks|key|220483|text|纯javascript和现代浏览器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220484|//+for+boolean
document.querySelector(`#isDebugMode`).checked

//+checked+means+specific+values
document.querySelector(`#size:checked`)?.value+??+defaultSize|code-block|syntax|javascript|220485|示例|220486|​|220487|<form>
++<input+type="checkbox"+id="isDebugMode"><br>
++<input+type="checkbox"+value="3"+id="size"><br>
++<input+type="submit">
</form>

<script>
++document.querySelector(`form`).onsubmit+=+()+=>+{
++++const+isDebugMode+=+document.querySelector(`#isDebugMode`).checked
++++const+defaultSize+=+"10"
++++const+size+=+document.querySelector(`#size:checked`)?.value+??+defaultSize
++++//++for+defaultSize+is+undefined+or+null
++++//+const+size+=+document.querySelector(`#size:checked`)?.value
++++console.log({isDebugMode,+size})
++++return+false
++}
</script>|220488|220489|220490|Optional_chaining+(?.)|unordered-list-item|offset|length|220491|220492|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining^0|0|0|0|0|0|0|0|0|M|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|M|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|19|8|@]|9|@$R|1A|S|1B|1|1C]]|A|$]]|$1|T|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p><em>pure javascript and modern browsers</em></p>
<pre class="lang-js prettyprint-override"><code>// for boolean
document.querySelector(`#isDebugMode`).checked

// checked means specific values
document.querySelector(`#size:checked`)?.value ?? defaultSize
</code></pre>
<h2>Example</h2>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;input type="checkbox" id="isDebugMode"&gt;&lt;br&gt;
  &lt;input type="checkbox" value="3" id="size"&gt;&lt;br&gt;
  &lt;input type="submit"&gt;
&lt;/form&gt;

&lt;script&gt;
  document.querySelector(`form`).onsubmit = () =&gt; {
    const isDebugMode = document.querySelector(`#isDebugMode`).checked
    const defaultSize = "10"
    const size = document.querySelector(`#size:checked`)?.value ?? defaultSize
    //  for defaultSize is undefined or null
    // const size = document.querySelector(`#size:checked`)?.value
    console.log({isDebugMode, size})
    return false
  }
&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining" rel="nofollow noreferrer">Optional_chaining (?.)</a></li>
</ul>


blocks|key|220219|text|在我的项目中，我通常使用以下代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220220|var+type[];
$("input[name='messageCheckbox']:checked").each(function+(i)+{
++++++++++++++++type[i]+=+$(this).val();
++++++++++++});|code-block|syntax|javascript|220221|它工作得很好。|220222|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In my project, I usually use this snippets:</p>
<pre><code>var type[];
$(&quot;input[name='messageCheckbox']:checked&quot;).each(function (i) {
                type[i] = $(this).val();
            });
</code></pre>
<p>And it works well.</p>


<p>So I've got code that looks like this:</p>

<pre><code>&lt;input class="messageCheckbox" type="checkbox" value="3" name="mailId[]"&gt;
&lt;input class="messageCheckbox" type="checkbox" value="1" name="mailId[]"&gt;
</code></pre>

<p>I just need Javascript to get the value of whatever checkbox is currently checked.</p>

<p><strong>EDIT</strong>: To add, there will only be ONE checked box.</p>


Get the value of checked checkbox?

jQuery

所以我的代码看起来像这样：<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]"><input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">我只需要Javascript来获取当前选中的任何复选框的值。编辑：要添加，将只有一

问是否获取复选框选中的值？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否获取复选框选中的值？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否获取复选框选中的值？
EN