blocks|key|624647|text|已经有一些基于纯JS的答案，但没有一个像我希望的那样简洁。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624648|这是我的解决方案，基于使用name标签(如单选按钮)和几行javascript。|624649|​|624650|function+onlyOne(checkbox)+{
++++var+checkboxes+=+document.getElementsByName('check')
++++checkboxes.forEach((item)+=>+{
++++++++if+(item+!==+checkbox)+item.checked+=+false
++++})
}|code-block|syntax|javascript|624651|<input+type="checkbox"+name="check"+onclick="onlyOne(this)">
<input+type="checkbox"+name="check"+onclick="onlyOne(this)">
<input+type="checkbox"+name="check"+onclick="onlyOne(this)">
<input+type="checkbox"+name="check"+onclick="onlyOne(this)">|624652|624653|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>There are already a few answers to this based on pure JS but none of them are quite as concise as I would like them to be.</p>

<p>Here is my solution based on using name tags (as with radio buttons) and a few lines of javascript.</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 onlyOne(checkbox) {
    var checkboxes = document.getElementsByName('check')
    checkboxes.forEach((item) =&gt; {
        if (item !== checkbox) item.checked = false
    })
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" name="check" onclick="onlyOne(this)"&gt;
&lt;input type="checkbox" name="check" onclick="onlyOne(this)"&gt;
&lt;input type="checkbox" name="check" onclick="onlyOne(this)"&gt;
&lt;input type="checkbox" name="check" onclick="onlyOne(this)"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|624342|text|单选按钮是理想的选择。你只需要第三个"neither“选项，默认情况下是选中的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624343|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Radio buttons are ideal. You just need a third "neither" option that is select by default.</p>


blocks|key|409263|text|$("#myform+input:checkbox").change(function()+{
++++$("#myform+input:checkbox").attr("checked",+false);
++++$(this).attr("checked",+true);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|409264|这应该适用于表单中任意数量的复选框。如果您有其他不属于组的成员，请将选择器设置为适用的输入。|unstyled|409265|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("#myform input:checkbox").change(function() {
    $("#myform input:checkbox").attr("checked", false);
    $(this).attr("checked", true);
});
</code></pre>

<p>This should work for any number of checkboxes in the form.  If you have others that aren't part of the group, set up the selectors the applicable inputs.</p>


blocks|key|409394|text|希望这段代码能帮到你。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|409395|​|409396|$(document).ready(function(){
$('.slectOne').on('change',+function()+{
+++$('.slectOne').not(this).prop('checked',+false);
+++$('#result').html($(this).data(+"id"+));
+++if($(this).is(":checked"))
+++	$('#result').html($(this).data(+"id"+));
+++else
+++	$('#result').html('Empty...!');
});
});|code-block|syntax|javascript|409397|<!DOCTYPE+html>
<html>
<head>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>
<input+type="checkbox"+class="slectOne"+data-id="1+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="2+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="3+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="4+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="5+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="6+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="7+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="8+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="9+selected"/>
<input+type="checkbox"+class="slectOne"+data-id="10+selected"/>
<span+id="result"></span>
</body>
</html>|409398|409399|工作链接Click+here|offset|length|409400|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53^0|0|0|0|0|0|4|A|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>May this code helps you.</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>$(document).ready(function(){
$('.slectOne').on('change', function() {
   $('.slectOne').not(this).prop('checked', false);
   $('#result').html($(this).data( "id" ));
   if($(this).is(":checked"))
   	$('#result').html($(this).data( "id" ));
   else
   	$('#result').html('Empty...!');
});
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;input type="checkbox" class="slectOne" data-id="1 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="2 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="3 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="4 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="5 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="6 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="7 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="8 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="9 selected"/&gt;
&lt;input type="checkbox" class="slectOne" data-id="10 selected"/&gt;
&lt;span id="result"&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Working link <a href="http://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53" rel="noreferrer">Click here</a></p>


blocks|key|624587|text|下面是我更喜欢的一个简单的HTML和JavaScript解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624588|//js函数，一次只允许选中一个工作日的复选框：|624589|function+checkOnlyOne(b){

var+x+=+document.getElementsByClassName('daychecks');
var+i;

for+(i+=+0;+i+<+x.length;+i%2B%2B)+{
++if(x[i].value+!=+b)+x[i].checked+=+false;
}
}


Day+of+the+week:
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Monday"+/>Mon&nbsp;&nbsp;&nbsp;
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Tuesday"+/>Tue&nbsp;&nbsp;&nbsp;
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Wednesday"+/>Wed&nbsp;&nbsp;&nbsp;
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Thursday"+/>Thu&nbsp;&nbsp;&nbsp;
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Friday"+/>Fri&nbsp;&nbsp;&nbsp;
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Saturday"+/>Sat&nbsp;&nbsp;&nbsp;
<input+class="daychecks"+onclick="checkOnlyOne(this.value);"+type="checkbox"+name="reoccur_weekday"+value="Sunday"+/>Sun&nbsp;&nbsp;&nbsp;<br+/><br+/>|code-block|syntax|javascript|624590|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is a simple HTML and JavaScript solution I prefer:</p>

<p>//js function to allow only checking of one weekday checkbox at a time:</p>

<pre><code>function checkOnlyOne(b){

var x = document.getElementsByClassName('daychecks');
var i;

for (i = 0; i &lt; x.length; i++) {
  if(x[i].value != b) x[i].checked = false;
}
}


Day of the week:
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Monday" /&gt;Mon&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Tuesday" /&gt;Tue&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Wednesday" /&gt;Wed&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Thursday" /&gt;Thu&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Friday" /&gt;Fri&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Saturday" /&gt;Sat&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Sunday" /&gt;Sun&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;br /&gt;&lt;br /&gt;
</code></pre>


blocks|key|409340|text|在billyonecan的回答的基础上，如果您需要多个复选框的代码片段(假设它们具有不同的名称)，则可以使用以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|409341|++++$('input.one').on('change',+function()+{
++++++++var+name+=+$(this).attr('name');
++++++++$('input[name='%2Bname%2B'].one').not(this).prop('checked',+false);
++++});+|code-block|syntax|javascript|409342|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1087721/billyonecan^0|1|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Building up on <a href="https://stackoverflow.com/users/1087721/billyonecan" title="billyonecan">billyonecan</a>'s answer, you can use the following code if you need that snippet for more than one checkbox (assuming they have different names).</p>

<pre><code>    $('input.one').on('change', function() {
        var name = $(this).attr('name');
        $('input[name='+name+'].one').not(this).prop('checked', false);
    }); 
</code></pre>


blocks|key|409655|text|使用普通的旧javascript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|409656|<html>
<head>
</head>
<body>
<input+type="checkbox"+name="group1[]"+id="groupname1"+onClick="toggle(1,'groupname')"/>
<input+type="checkbox"+name="group1[]"+id="groupname2"+onClick="toggle(2,'groupname')"++/>
<input+type="checkbox"+name="group1[]"+id="groupname3"+onClick="toggle(3,'groupname')"+/>

<input+type="checkbox"+name="group2[]"+id="diffGroupname1"+onClick="toggle(1,'diffGroupname')"/>
<input+type="checkbox"+name="group2[]"+id="diffGroupname2"+onClick="toggle(2,'diffGroupname')"++/>
<input+type="checkbox"+name="group2[]"+id="diffGroupname3"+onClick="toggle(3,'diffGroupname')"+/>
<script>
function+toggle(which,group){
var+counter=1;
var+checkbox=document.getElementById(group%2Bcounter);
while(checkbox){
if(counter==which){

}else{
checkbox.checked=false;
}
counter%2B%2B;
checkbox=document.getElementById(group%2Bcounter);
}
}
</script>
</body>
</html>|code-block|syntax|javascript|409657|编辑:也可以|409658|<html>
<head>
</head>
<body>
<input+type="checkbox"+name="group1[]"+class="groupname"+onClick="toggle(this,'groupname')"/>
<input+type="checkbox"+name="group1[]"+class="groupname"+onClick="toggle(this,'groupname')"++/>
<input+type="checkbox"+name="group1[]"+class="groupname"+onClick="toggle(this,'groupname')"+/>

<input+type="checkbox"+name="group2[]"+class="diffGroupname"+onClick="toggle(this,'diffGroupname')"/>
<input+type="checkbox"+name="group2[]"+class="diffGroupname"+onClick="toggle(this,'diffGroupname')"++/>
<input+type="checkbox"+name="group2[]"+class="diffGroupname"+onClick="toggle(this,'diffGroupname')"+/>
<script>
function+toggle(which,theClass){
var+checkbox=document.getElementsByClassName(theClass);
for(var+i=0;i<checkbox.length;i%2B%2B){
if(checkbox[i]==which){

}else{
checkbox[i].checked=false;
}
}
}
</script>
</body>
</html>|409659|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>With plain old javascript.</p>
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group1[]&quot; id=&quot;groupname1&quot; onClick=&quot;toggle(1,'groupname')&quot;/&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group1[]&quot; id=&quot;groupname2&quot; onClick=&quot;toggle(2,'groupname')&quot;  /&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group1[]&quot; id=&quot;groupname3&quot; onClick=&quot;toggle(3,'groupname')&quot; /&gt;

&lt;input type=&quot;checkbox&quot; name=&quot;group2[]&quot; id=&quot;diffGroupname1&quot; onClick=&quot;toggle(1,'diffGroupname')&quot;/&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group2[]&quot; id=&quot;diffGroupname2&quot; onClick=&quot;toggle(2,'diffGroupname')&quot;  /&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group2[]&quot; id=&quot;diffGroupname3&quot; onClick=&quot;toggle(3,'diffGroupname')&quot; /&gt;
&lt;script&gt;
function toggle(which,group){
var counter=1;
var checkbox=document.getElementById(group+counter);
while(checkbox){
if(counter==which){

}else{
checkbox.checked=false;
}
counter++;
checkbox=document.getElementById(group+counter);
}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>edit: also possible</p>
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group1[]&quot; class=&quot;groupname&quot; onClick=&quot;toggle(this,'groupname')&quot;/&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group1[]&quot; class=&quot;groupname&quot; onClick=&quot;toggle(this,'groupname')&quot;  /&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group1[]&quot; class=&quot;groupname&quot; onClick=&quot;toggle(this,'groupname')&quot; /&gt;

&lt;input type=&quot;checkbox&quot; name=&quot;group2[]&quot; class=&quot;diffGroupname&quot; onClick=&quot;toggle(this,'diffGroupname')&quot;/&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group2[]&quot; class=&quot;diffGroupname&quot; onClick=&quot;toggle(this,'diffGroupname')&quot;  /&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;group2[]&quot; class=&quot;diffGroupname&quot; onClick=&quot;toggle(this,'diffGroupname')&quot; /&gt;
&lt;script&gt;
function toggle(which,theClass){
var checkbox=document.getElementsByClassName(theClass);
for(var i=0;i&lt;checkbox.length;i++){
if(checkbox[i]==which){

}else{
checkbox[i].checked=false;
}
}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|624880|text|复选框组|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624881|​|624882|var+group_=(el,callback)=>{
el.forEach((checkbox)=>{
callback(checkbox)
+++++})
}

group_(document.getElementsByName('check'),(item)=>{
item.onclick=(e)=>{
group_(document.getElementsByName('check'),(item)=>{
item.checked=false;
})
e.target.checked=true;

}
})|code-block|syntax|javascript|624883|<input+type="checkbox"+name="check"+>
<input+type="checkbox"+name="check"+>
<input+type="checkbox"+name="check"+>
<input+type="checkbox"+name="check">|624884|624885|不带循环的简单复选框|624886|624887|var+last;
document.addEventListener('input',(e)=>{
if(e.target.getAttribute('name')=="myRadios"){
if(last)
last.checked=false;
}
e.target.checked=true;
last=e.target;
})|624888|<input+type="checkbox"+name="myRadios"+value="1"+/>+1
<input+type="checkbox"+name="myRadios"+value="2"+/>+2|624889|624890|按单个分区分组|624891|624892|var+group_=(el,callback)=>{
el.forEach((checkbox)=>{
callback(checkbox)
+++++})
}
var+group_el=document.querySelectorAll("*[data-name]+>+input")
group_(group_el,(item)=>{
item.onclick=(e)=>{
group_(group_el,(item)=>{
item.checked=false;
})

e.target.checked=true;
}
})|624893|<div+data-name="check">
<input+type="checkbox">
<input+type="checkbox">
<input+type="checkbox">
<input+type="checkbox">
</div>|624894|624895|css单组div|624896|624897|var+last;
document.addEventListener('input',(e)=>{
var+closest=e.target.closest("*[data-name='check']");
console.log(closest)
if(e.target.closest("*[data-name]")){
if(last)
last.checked=false;
}

e.target.checked=true;
last=e.target;
})|624898|<div+data-name="check">
<input+type="checkbox"+value="1"+/>+1
<input+type="checkbox"+value="2"+/>+2
</div>|624899|选中、取消选中和单个选中框|624900|var+last;
document.addEventListener('input',(e)=>{
var+closest=e.target.closest("*[data-name='check']");
if(e.target.closest("*[data-name]")){
if(last)
last.checked=false;
}
if(e.target!==last)
last=e.target;
else
last=undefined;
})|624901|<div+data-name="check">
<input+type="checkbox"+value="1"+/>+1
<input+type="checkbox"+value="2"+/>+2
</div>|624902|624903|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1L|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1M|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|1N|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1O|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|1P|8|@]|9|@]|A|$G|H]]|$1|S|3|C|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1R|8|@]|9|@]|A|$]]|$1|V|3|C|5|6|7|1S|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1T|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|F|7|1U|8|@]|9|@]|A|$G|H]]|$1|10|3|C|5|6|7|1V|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1W|8|@]|9|@]|A|$]]|$1|13|3|C|5|6|7|1X|8|@]|9|@]|A|$]]|$1|14|3|15|5|F|7|1Y|8|@]|9|@]|A|$G|H]]|$1|16|3|17|5|F|7|1Z|8|@]|9|@]|A|$G|H]]|$1|18|3|19|5|6|7|20|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|F|7|21|8|@]|9|@]|A|$G|H]]|$1|1C|3|1D|5|F|7|22|8|@]|9|@]|A|$G|H]]|$1|1E|3|C|5|6|7|23|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|1G|$]]

<p>Checkbox Group</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 group_=(el,callback)=&gt;{
el.forEach((checkbox)=&gt;{
callback(checkbox)
     })
}

group_(document.getElementsByName('check'),(item)=&gt;{
item.onclick=(e)=&gt;{
group_(document.getElementsByName('check'),(item)=&gt;{
item.checked=false;
})
e.target.checked=true;

}
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" name="check" &gt;
&lt;input type="checkbox" name="check" &gt;
&lt;input type="checkbox" name="check" &gt;
&lt;input type="checkbox" name="check"&gt;</code></pre>
</div>
</div>
</p>
<p>checkbox simple without loop</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 last;
document.addEventListener('input',(e)=&gt;{
if(e.target.getAttribute('name')=="myRadios"){
if(last)
last.checked=false;
}
e.target.checked=true;
last=e.target;
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" name="myRadios" value="1" /&gt; 1
&lt;input type="checkbox" name="myRadios" value="2" /&gt; 2</code></pre>
</div>
</div>
</p>
<p>Group By Single Div</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 group_=(el,callback)=&gt;{
el.forEach((checkbox)=&gt;{
callback(checkbox)
     })
}
var group_el=document.querySelectorAll("*[data-name] &gt; input")
group_(group_el,(item)=&gt;{
item.onclick=(e)=&gt;{
group_(group_el,(item)=&gt;{
item.checked=false;
})

e.target.checked=true;
}
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-name="check"&gt;
&lt;input type="checkbox"&gt;
&lt;input type="checkbox"&gt;
&lt;input type="checkbox"&gt;
&lt;input type="checkbox"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>css single group div</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 last;
document.addEventListener('input',(e)=&gt;{
var closest=e.target.closest("*[data-name='check']");
console.log(closest)
if(e.target.closest("*[data-name]")){
if(last)
last.checked=false;
}

e.target.checked=true;
last=e.target;
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-name="check"&gt;
&lt;input type="checkbox" value="1" /&gt; 1
&lt;input type="checkbox" value="2" /&gt; 2
&lt;/div&gt;</code></pre>
</div>
</div>

check ,uncheck and single checked box
<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 last;
document.addEventListener('input',(e)=&gt;{
var closest=e.target.closest("*[data-name='check']");
if(e.target.closest("*[data-name]")){
if(last)
last.checked=false;
}
if(e.target!==last)
last=e.target;
else
last=undefined;
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-name="check"&gt;
&lt;input type="checkbox" value="1" /&gt; 1
&lt;input type="checkbox" value="2" /&gt; 2
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|409607|text|我的版本:使用数据属性和普通JavaScript|type|unstyled|depth|inlineStyleRanges|entityRanges|data|409608|<div+class="test-checkbox">
++++Group+One:+<label>
++++++++<input+type="checkbox"+data-limit="only-one-in-a-group"+name="groupOne"+value="Eat"+/>Eat</label>
++++<label>
++++++++<input+type="checkbox"+data-limit="only-one-in-a-group"+name="groupOne"+value="Sleep"+/>Sleep</label>
++++<label>
++++++++<input+type="checkbox"+data-limit="only-one-in-a-group"+name="groupOne"+value="Play"+/>Play</label>
++++<br+/>
++++Group+Two:+<label>
++++++++<input+type="checkbox"+data-limit="only-one-in-a-group"+name="groupTwo"+value="Fat"+/>Fat</label>
++++<label>
++++++++<input+type="checkbox"+data-limit="only-one-in-a-group"+name="groupTwo"+value="Comfort"+/>Comfort</label>
++++<label>
++++++++<input+type="checkbox"+data-limit="only-one-in-a-group"+name="groupTwo"+value="Happy"+/>Happy</label>
</div>
<script>
++++let+cbxes+=+document.querySelectorAll('input[type="checkbox"][data-limit="only-one-in-a-group"]');
++++[...cbxes].forEach((cbx)+=>+{
++++++++cbx.addEventListener('change',+(e)+=>+{
++++++++++++if+(e.target.checked)
++++++++++++++++uncheckOthers(e.target);
++++++++});
++++});
++++function+uncheckOthers+(clicked)+{
++++++++let+name+=+clicked.getAttribute('name');
++++++++//+find+others+in+same+group,+uncheck+them
++++++++[...cbxes].forEach((other)+=>+{
++++++++++++if+(other+!=+clicked+&&+other.getAttribute('name')+==+name)
++++++++++++++++other.checked+=+false;
++++++++});
++++}
</script>|code-block|syntax|javascript|409609|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>My version: use data attributes and Vanilla JavaScript</p>

<pre><code>&lt;div class="test-checkbox"&gt;
    Group One: &lt;label&gt;
        &lt;input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Eat" /&gt;Eat&lt;/label&gt;
    &lt;label&gt;
        &lt;input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Sleep" /&gt;Sleep&lt;/label&gt;
    &lt;label&gt;
        &lt;input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Play" /&gt;Play&lt;/label&gt;
    &lt;br /&gt;
    Group Two: &lt;label&gt;
        &lt;input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Fat" /&gt;Fat&lt;/label&gt;
    &lt;label&gt;
        &lt;input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Comfort" /&gt;Comfort&lt;/label&gt;
    &lt;label&gt;
        &lt;input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Happy" /&gt;Happy&lt;/label&gt;
&lt;/div&gt;
&lt;script&gt;
    let cbxes = document.querySelectorAll('input[type="checkbox"][data-limit="only-one-in-a-group"]');
    [...cbxes].forEach((cbx) =&gt; {
        cbx.addEventListener('change', (e) =&gt; {
            if (e.target.checked)
                uncheckOthers(e.target);
        });
    });
    function uncheckOthers (clicked) {
        let name = clicked.getAttribute('name');
        // find others in same group, uncheck them
        [...cbxes].forEach((other) =&gt; {
            if (other != clicked &amp;&amp; other.getAttribute('name') == name)
                other.checked = false;
        });
    }
&lt;/script&gt;
</code></pre>


blocks|key|409353|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|409354|<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE+html>
<html>

<head>
++<script+src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
++<script>
++++angular.module('app',+[]).controller('appc',+['$scope',
++++++function($scope)+{
++++++++$scope.selected+=+'male';
++++++}
++++]);
++</script>
</head>

<body+ng-app="app"+ng-controller="appc">
++<label>SELECTED:+{{selected}}</label>
++<div>
++++<input+type="checkbox"+ng-checked="selected=='male'"+ng-true-value="'male'"+ng-model="selected">Male
++++<br>
++++<input+type="checkbox"+ng-checked="selected=='female'"+ng-true-value="'female'"+ng-model="selected">Female
++++<br>
++++<input+type="checkbox"+ng-checked="selected=='other'"+ng-true-value="'other'"+ng-model="selected">Other
++</div>
</body>
</html>|code-block|syntax|javascript|409355|409356|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    angular.module('app', []).controller('appc', ['$scope',
      function($scope) {
        $scope.selected = 'male';
      }
    ]);
  &lt;/script&gt;
&lt;/head&gt;

&lt;body ng-app="app" ng-controller="appc"&gt;
  &lt;label&gt;SELECTED: {{selected}}&lt;/label&gt;
  &lt;div&gt;
    &lt;input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected"&gt;Male
    &lt;br&gt;
    &lt;input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected"&gt;Female
    &lt;br&gt;
    &lt;input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected"&gt;Other
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|624521|text|如果有人需要一个没有外部javascript库的解决方案，你可以使用这个例子。一组允许0..1值的复选框。您可以单击复选框组件或关联的标签文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624522|++++<input+id="mygroup1"+name="mygroup"+type="checkbox"+value="1"+onclick="toggleRadioCheckbox(this)"+/>+<label+for="mygroup1">Yes</label>
++++<input+id="mygroup0"+name="mygroup"+type="checkbox"+value="0"+onclick="toggleRadioCheckbox(this)"+/>+<label+for="mygroup0">No</label>

-+-+-+-+-+-+-+-+

++++function+toggleRadioCheckbox(sender)+{
++++++++//+RadioCheckbox:+0..1+enabled+in+a+group+
++++++++if+(!sender.checked)+return;
++++++++var+fields+=+document.getElementsByName(sender.name);
++++++++for(var+idx=0;+idx<fields.length;+idx%2B%2B)+{
++++++++++++var+field+=+fields[idx];
++++++++++++if+(field.checked+&&+field!=sender)
++++++++++++++++field.checked=false;
++++++++}
++++}|code-block|syntax|javascript|624523|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 someone need a solution without an external javascript libraries you could use this example. A group of checkboxes allowing 0..1 values. You may click on the checkbox component or associated label text.</p>

<pre><code>    &lt;input id="mygroup1" name="mygroup" type="checkbox" value="1" onclick="toggleRadioCheckbox(this)" /&gt; &lt;label for="mygroup1"&gt;Yes&lt;/label&gt;
    &lt;input id="mygroup0" name="mygroup" type="checkbox" value="0" onclick="toggleRadioCheckbox(this)" /&gt; &lt;label for="mygroup0"&gt;No&lt;/label&gt;

- - - - - - - - 

    function toggleRadioCheckbox(sender) {
        // RadioCheckbox: 0..1 enabled in a group 
        if (!sender.checked) return;
        var fields = document.getElementsByName(sender.name);
        for(var idx=0; idx&lt;fields.length; idx++) {
            var field = fields[idx];
            if (field.checked &amp;&amp; field!=sender)
                field.checked=false;
        }
    }
</code></pre>


blocks|key|409581|text|//Here+is+a+solution+using+JQuery++++
<input+type+=+"checkbox"+class="a"/>one
++++<input+type+=+"checkbox"+class="a"/>two
++++<input+type+=+"checkbox"+class="a"/>three
++++<script>
+++++++$('.a').on('change',+function()+{
++++++++++++$('.a').not(this).prop('checked',false);
++++});
++++</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|409582|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>//Here is a solution using JQuery    
&lt;input type = "checkbox" class="a"/&gt;one
    &lt;input type = "checkbox" class="a"/&gt;two
    &lt;input type = "checkbox" class="a"/&gt;three
    &lt;script&gt;
       $('.a').on('change', function() {
            $('.a').not(this).prop('checked',false);
    });
    &lt;/script&gt;
</code></pre>


blocks|key|624838|text|下面的代码片段演示了一种在组中仅选择一个复选框的简单方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624839|624840|​|624841|++<!DOCTYPE+html>
<html>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
++++<h3>Demonstration+of+Checkbox+Toggle</h3>
++++<p>
++++++++<span><b>Letters:</b></span>
++++++++A<input+type="checkbox"+name="A"+>
++++++++B<input+type="checkbox"+name="B"+>
++++++++C<input+type="checkbox"+name="C"+>
++++++++D<input+type="checkbox"+name="D"+>
++++</p>
++++<p>
++++++++<span><b>Numbers:</b></span>
++++++++1<input+type="checkbox"+name="1"+>
++++++++2<input+type="checkbox"+name="2"+>
++++++++3<input+type="checkbox"+name="3"+>
++++</p>
+++++<p>
++++++++<span><b>Birds:</b></span>
++++++++Scarlet+Ibis<input+type="checkbox"+name="Scarlet+Ibis"+>
++++++++Cocrico+<input+type="checkbox"+name="Cocrico"+>
++++++++hummingbird+<input+type="checkbox"+name="hummingbird"+>
++++</p>
</body>

<script>
++++$(function()
++++{
++++++++function+toggle(choices,name)+
++++++++{
++++++++++++if(choices.includes(name))
++++++++++++{
++++++++++++++++for(+i=0;i<choices.length;i%2B%2B)
++++++++++++++++{
++++++++++++++++if(name+!=choices[i])
++++++++++++++++++++$('input[name="'+%2B+choices[i]+%2B+'"]').not(this).prop('checked',+false);+
++++++++++++++++}
++++++++++++}
++++++++}
++++++++$('input[type="checkbox"]').on('change',+function()+
++++++++{
++++++++++++var+letters+=+["A","B","C","D"];
++++++++++++var+numbers+=+["1",+"2",+"3"];
++++++++++++var+birds+=+["Scarlet+Ibis",+"Cocrico",+"hummingbird"];
++++++++++++
++++++++++++toggle(letters,this.name);
++++++++++++toggle(numbers,this.name);
++++++++++++toggle(birds,this.name);
++++++++});

++++});
</script>
</html>|code-block|syntax|javascript|624842|624843|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|O|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|P|8|@]|9|@]|A|$H|I]]|$1|J|3|D|5|6|7|Q|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|L|$]]

<p>The Code snippet below demonstrates a simple approach for selecting only one checkbox in a group.</p>
<hr />
<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;!DOCTYPE html&gt;
&lt;html&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;body&gt;
    &lt;h3&gt;Demonstration of Checkbox Toggle&lt;/h3&gt;
    &lt;p&gt;
        &lt;span&gt;&lt;b&gt;Letters:&lt;/b&gt;&lt;/span&gt;
        A&lt;input type="checkbox" name="A" &gt;
        B&lt;input type="checkbox" name="B" &gt;
        C&lt;input type="checkbox" name="C" &gt;
        D&lt;input type="checkbox" name="D" &gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;span&gt;&lt;b&gt;Numbers:&lt;/b&gt;&lt;/span&gt;
        1&lt;input type="checkbox" name="1" &gt;
        2&lt;input type="checkbox" name="2" &gt;
        3&lt;input type="checkbox" name="3" &gt;
    &lt;/p&gt;
     &lt;p&gt;
        &lt;span&gt;&lt;b&gt;Birds:&lt;/b&gt;&lt;/span&gt;
        Scarlet Ibis&lt;input type="checkbox" name="Scarlet Ibis" &gt;
        Cocrico &lt;input type="checkbox" name="Cocrico" &gt;
        hummingbird &lt;input type="checkbox" name="hummingbird" &gt;
    &lt;/p&gt;
&lt;/body&gt;

&lt;script&gt;
    $(function()
    {
        function toggle(choices,name) 
        {
            if(choices.includes(name))
            {
                for( i=0;i&lt;choices.length;i++)
                {
                if(name !=choices[i])
                    $('input[name="' + choices[i] + '"]').not(this).prop('checked', false); 
                }
            }
        }
        $('input[type="checkbox"]').on('change', function() 
        {
            var letters = ["A","B","C","D"];
            var numbers = ["1", "2", "3"];
            var birds = ["Scarlet Ibis", "Cocrico", "hummingbird"];
            
            toggle(letters,this.name);
            toggle(numbers,this.name);
            toggle(birds,this.name);
        });

    });
&lt;/script&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|624947|text|下面是我的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624948|<label>Select+Unit+</label>
++++++++<div+class="row">
++++++++++++<div+class="col-md-4">
++++++++++++++++<input+type="checkbox"+class="group1"+checked++/>+Meters
++++++++++++</div>
++++++++++++<div+class="col-md-4">
++++++++++++++++<input+type="checkbox"+class="group1"/>+Pieces
++++++++++++</div>
++++++++++++<div+class="col-md-4">
++++++++++++++++<input+type="checkbox"+class="group1"+/>+cm
++++++++++++</div>
++++++++</div>
++++++++<br+/>|code-block|syntax|javascript|624949|和两行javascript|624950|$('input[type="checkbox"]').on('change',+function+()+{
++++$(this).parent().siblings('div').children('input[type="checkbox"]').not(this).prop('checked',+false);
});|624951|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>here is my code:</p>
<pre><code>&lt;label&gt;Select Unit &lt;/label&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;input type=&quot;checkbox&quot; class=&quot;group1&quot; checked  /&gt; Meters
            &lt;/div&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;input type=&quot;checkbox&quot; class=&quot;group1&quot;/&gt; Pieces
            &lt;/div&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;input type=&quot;checkbox&quot; class=&quot;group1&quot; /&gt; cm
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;br /&gt;
</code></pre>
<p>and 2-lines of javascript</p>
<pre><code>$('input[type=&quot;checkbox&quot;]').on('change', function () {
    $(this).parent().siblings('div').children('input[type=&quot;checkbox&quot;]').not(this).prop('checked', false);
});
</code></pre>


<p>So how can I only allow a user to select only one checkbox?</p>

<p>I know radio buttons are "ideal", but for my purpose...it's not.</p>

<p>I have a field where users need to select either or of the two options, but not both. The problem is that I need my users to also be able to unselect their option, and this is where radio buttons fail because once you select the group, you have to choose an option.</p>

<p>I will be validating the info via php, but I'd still like to restrict the users to one answer if they want to give it.</p>


html select only one checkbox in a group

那么，我如何才能只允许用户选择一个复选框呢？我知道单选按钮是“理想的”，但对我来说……它不是。我有一个字段，用户需要选择两个选项中的一个或，但不能两个都选择。问题是，我需要我的用户也能够取消选择他们的选项，这就是单选按钮失败的地方，因为一旦选择了组，就必须选择一个选项。我会通过php验证信息，但我仍然想限制用户只有一个答案，如果他们想给的话。

问html在一个组中只选择一个复选框
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html在一个组中只选择一个复选框EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html在一个组中只选择一个复选框
EN