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?
source to share
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/
source to share
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>
source to share
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/>
source to share