How do you bine a radio and checkbox input? With that I mean when you select the radio button it deselects the checkboxes and when you select a checkbox the radio input gets deselected.
Here's my example input form:
<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>
Which would look like this
Now if I were to select option 4 I want option 2 and option 3 to deselect. How do I as best do this? Is there some easy trick or do I have to include some javascript magic?
How do you bine a radio and checkbox input? With that I mean when you select the radio button it deselects the checkboxes and when you select a checkbox the radio input gets deselected.
Here's my example input form:
<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>
Which would look like this
Now if I were to select option 4 I want option 2 and option 3 to deselect. How do I as best do this? Is there some easy trick or do I have to include some javascript magic?
- 2 You would need JavaScript. It's not a good idea for reasons of usability. Having things behave in a way that users do not expect violates the Principle of Least Astonishment: en.wikipedia/wiki/Principle_of_least_astonishment – Bob Brown Commented Oct 5, 2014 at 20:09
- @BobBrown But it would act as I expect 'cause in my mind radio buttons deselect when you select anything else from the same group. And that is what I want to aplish here. – Applejag Commented Oct 5, 2014 at 20:11
- It may act as you expect, but it won't act as your readers expect. You do not have radio buttons. You have a bination of checkboxes and radio buttons. Users will not expect that operating a radio button will change any checkbox. Suggestion: Use all checkboxes and eliminate invalid binations with JavaScript and an explanatory message. – Bob Brown Commented Oct 5, 2014 at 20:16
- @BobBrown So you're saying I should change system? And not use a custom system? I could do that but I thought it would be nice. – Applejag Commented Oct 5, 2014 at 20:21
3 Answers
Reset to default 3Check the following (JQuery is required). Please also read my ment on OP's accepted answer by @Maxim Orlovsky)
$('input[name="d[]"]').on('change', function(){
if ($(this).attr('type') == 'radio' ) {
if ( $(this).prop('checked') ) {
$('input[name="d[]"][type="checkbox"]').prop('checked', false);
}
}
else {
if ( $(this).prop('checked') ) {
$('input[name="d[]"][type="radio"]').prop('checked', false);
}
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>You need some JavaScript (jQuery):
$('input[name="d[]"]').on('change', function(){
if ($(this).attr('type') == 'radio' ) {
if ( $(this).prop('checked') ) {
$('input[name="d[]"][type="checkbox"]').prop('checked', false);
}else {
$('input[name="d[]"][type="checkbox"]').prop('checked', true);
}
}
else {
if ( $(this).prop('checked') ) {
$('input[name="d[]"][type="radio"]').prop('checked', false);
}else {
$('input[name="d[]"][type="radio"]').prop('checked', true);
}
}
});
Live demo -- http://jsfiddle/u2n8j5r2/1/
Here is some code that uses all checkboxes, does not require jQuery, and should do what you want. (I've edited the code to change when the error message is removed.)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Checkboxes</title>
<style type="text/css">
</style>
<script type="text/javascript">
//<![CDATA[
function chkBoxes() {
var msg = document.getElementById("msg");
cb1 = document.getElementById("cb1"),
cb2 = document.getElementById("cb2"),
cb3 = document.getElementById("cb3"),
cb4 = document.getElementById("cb4");
if (cb4.checked) {
if (cb1.checked || cb2.checked || cb3.checked) {
msg.innerHTML = "Option 4 not allowed with options 1-3";
cb1.checked = false;
cb2.checked = false;
cb3.checked = false;
}
} else {
msg.innerHTML = "";
}
}
//]]>
</script>
</head>
<body>
<input type="checkbox" name="d[]" id="cb1" value="1" onchange="chkBoxes();"> option 1<br/>
<input type="checkbox" name="d[]" id="cb2" value="2" onchange="chkBoxes();"> option 2<br/>
<input type="checkbox" name="d[]" id="cb3" value="3" onchange="chkBoxes();"> option 3<br/>
<input type="checkbox" name="d[]" id="cb4" value="4" onchange="chkBoxes();"> option 4<br/>
<p id="msg"></p>
</body>
</html>