I have 15 check boxes in a form. This checkboxes are independent to eachother. I want a javascript function that makes, when user is selecting 2 checkboxes, the first checked box be unchecked and the second remain checked.
change(function() { $("#myform input:checkbox"). attr("checked", false); $(this). attr("checked", true); }); This should work for any number of checkboxes in the form.
If you want to do a selectionable list where only one can be selected the best in term of UX is to use radio button.
If you want to allow the user to check only one checkbox from a group of the checkboxes, it can be done easily using jQuery. At first, include the jQuery library. To modify the default functionality of checkboxes and use like the radio buttons, you need to restrict the user to select multiple checkboxes.
Would you be better off using radio buttons instead of checkboxes as per this site: http://www.echoecho.com/htmlforms10.htm?
If you want to use check boxes I guess you could do something like this:
HTML Code:
<input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 1
<input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 2
<input type="checkbox" id="Check3" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 3
<input type="checkbox" id="Check4" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 4
Javascript Code :
function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++)
{
document.getElementById("Check" + i).checked = false;
}
document.getElementById(id).checked = true;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With