html select only one checkbox in a group
This snippet will:
- Allow grouping like Radio buttons
- Act like Radio
- Allow unselecting all
// the selector will match all input controls of type :checkbox// and attach a click event handler $("input:checkbox").on('click', function() { // in the handler, 'this' refers to the box clicked on var $box = $(this); if ($box.is(":checked")) { // the name of the box is retrieved using the .attr() method // as it is assumed and expected to be immutable var group = "input:checkbox[name='" + $box.attr("name") + "']"; // the checked state of the group/box on the other hand will change // and the current value is retrieved using .prop() method $(group).prop("checked", false); $box.prop("checked", true); } else { $box.prop("checked", false); }});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div> <h3>Fruits</h3> <label> <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label> <label> <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label> <label> <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label></div><div> <h3>Animals</h3> <label> <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label> <label> <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label> <label> <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label></div>
Select only one checkbox in a group but have option to select more than one if it's certain checkboxes
var aCheckboxes = document.querySelectorAll("input[name='checkboxes[]']");
var aGroups = [ [1, 2, 3, 6], [4, 5]];
for (var i = 0; i < aCheckboxes.length; i++) { aCheckboxes[i].addEventListener("change", function(e) { checkGroups(e.target.value); //...call checkGroups... });}
function enableCheckboxes() { for (var i = 0; i < aCheckboxes.length; i++) { aCheckboxes[i].disabled = false; }}
function checkGroups(sCheckboxVal) { var isOneChecked = false;
for (var x = 0; x < aCheckboxes.length; x++) { //Loop through all checkboxes if (aCheckboxes[x].checked === true) { //is checkbox is checked isOneChecked = true; } } enableCheckboxes(); //Enable all checkboxes
if (isOneChecked === true) { //Is at least one checkbox is checked check groups aGroups.forEach(function(aGroup) { //Loop throgh your groups if (aGroup.indexOf(parseInt(sCheckboxVal)) === -1) { //Is checkbox not in group... for (x = 0; x < aGroup.length; x++) { //...loop thorugh all checkboxes... document.querySelectorAll("input[value='" + aGroup[x] + "']")[0].disabled = true; //...and disable checkbox } } }); }}
<input type="checkbox" name="checkboxes[]" value="1"><input type="checkbox" name="checkboxes[]" value="2"><input type="checkbox" name="checkboxes[]" value="3"><input type="checkbox" name="checkboxes[]" value="4"><input type="checkbox" name="checkboxes[]" value="5"><input type="checkbox" name="checkboxes[]" value="6">
Select only one checkbox in group
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script> $(function() { $("input:checkbox").on('click', function() { // in the handler, 'this' refers to the box clicked on var $box = $(this); if ($box.is(":checked")) { // the name of the box is retrieved using the .attr() method // as it is assumed and expected to be immutable var group = "input:checkbox[name='" + $box.attr("name") + "']"; // the checked state of the group/box on the other hand will change // and the current value is retrieved using .prop() method $(group).prop("checked", false); $box.prop("checked", true); } else { $box.prop("checked", false); } }); });</script><form> <div> <li> <div class="radio"> <label> <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется </label> </div> </li> <li> <div class="radio"> <label> <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имеется </label> </div> </li> <div></form>
Select only one checkbox in a group
If you only want one item to be selectable in each group, then you should use radio buttons rather than checkboxes. Then users will expect and understand that only one item is selectable. And if you create a series of radio buttons with the same "name" attribute, then the browser will automatically only allow one of them to be selected.
If you use checkboxes, then even if you use javascript to achieve what you suggest, then your users are likely to be confused, as the normal use of checkboxes is to allow the selection of multiple items at the same time.
How to only have one checkbox checked at a time?
Here is an example without JQuery. Add a class to your inputs.When Clicked, uncheck everything, and then check the clicked input if it was not checked.
function check(input) { var checkboxes = document.getElementsByClassName("radioCheck"); for(var i = 0; i < checkboxes.length; i++) { //uncheck all if(checkboxes[i].checked == true) { checkboxes[i].checked = false; } } //set checked of clicked object if(input.checked == true) { input.checked = false; } else { input.checked = true; } }
<input type="checkbox" class="radioCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes <input type="checkbox" class="radioCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No'
Check only one checkbox in each row
I have managed to use radio button instead of checkboxes
Also this solution fixed my problem:
html select only one checkbox in a group
How to select only one checkbox from many checkboxes with Javascript or jquery?
function message(){
alert("You cant check more than 1 checkbox ")
}
document.querySelectorAll(".cgroup").forEach((chbx)=>{
chbx.addEventListener("change",(e)=>{
if(!e.target.checked) return;
var checkedbox = Array.from(document.querySelectorAll(".cgroup")).find(chbx=>chbx!=e.target&&chbx.checked)
if(checkedbox){
e.target.checked = false
message()
}
})
})
<div>
<input class="cgroup" type="checkbox">
<input class="cgroup" type="checkbox">
<input class="cgroup" type="checkbox">
<input class="cgroup" type="checkbox">
</div>
To select only one checkbox at a time and execute a particular task on a particular checkbox being selected or both of the checkboxes being unchecked
Need few changes:
HTML Code:
<div *ngFor="let chk of checkboxes">
<input type="checkbox" [(ngModel)]="chk.checked" (ngModelChange)="uncheckOther(chk,$event)">
{{chk.value}}
</div>
TS Code:
uncheckOther(chk, event) {
if (event) {
//uncheck all
this.checkboxes.forEach(x => {
if (x.checked == true)
x.checked = false;
})
//check the selected
if (chk.checked == true) {
chk.checked = false;
} else {
chk.checked = true;
}
if (chk.value == "Request") {
console.log('Call Request API')
}
else if (chk.value == "Reservation") {
console.log('Call Reservation API')
}
}
else {
console.log('Call Both API')
}
}
Working Demo
how can I only allow a user to select only one checkbox (bootstrap checkbox)?
You want a radio type input, not check boxes. Each input gets a unique id and value, but the same name to put it in a "radio group."
See https://www.w3schools.com/html/html_form_input_types.asp
<input class="form-check-input" type="radio" name="uo" id="uo0" value="0" />
<input class="form-check-input" type="radio" name="uo" id="uo1" value="1" />
<input class="form-check-input" type="radio" name="uo" id="uo2" value="2" />
Related Topics
Make an HTML Number Input Always Display 2 Decimal Places
Google Chrome Does Not Autoplay Html5 Video on Mobile
Bootstrap Toggle Collapse Is Not Working
How to Do a Post Request in HTML Without Opening a New Tab
How to Select All the Checkboxes in Angular 6
How to Set Width of Mat-Table Column in Angular
How Wide Is the Default '≪Body≫' Margin
How to Align 3 Divs (Left/Center/Right) Inside Another Div
Make Body Have 100% of the Browser Height
Select Option Padding Not Working in Chrome
Css - How to Make the Checkbox and Label in One Line
How to Make All Images of Different Height and Width the Same Via CSS
Html/Css - Make Alert Disappear After a Few Seconds
How to Allow Http Content Within an Iframe on a Https Site
How to Modify the Primeng P-Calendar Style