HTML radio and checkbox combined?
How do you combine radio and checkbox? That being said, I mean when you select a radio button, it deselects the checkboxes, and when you select a checkbox, the radio input will be canceled.
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 will look like this:
Now if I chose option 4
, I want to option 2
and option 3
deselect. What is the best way to do this? Is there some simple trick or do I need to enable some javascript magic?
You need 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.net/u2n8j5r2/1/
Here is some code that uses all checkboxes, doesn't require jQuery, and should do what you want. (I changed 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>
Check the following ( JQuery required). Please also read my comment on the 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.com/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/>