With Javascript, I would like one first checkbox to get unchecked when I check the second one. I also would like that the two checkboxes can be unchecked after having been checked.
Here is my HTML code :
<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>
I tried with two checkboxes, but I don't manage to uncheck #1 when #2 is checked.
Here is my Jsfiddle with the example with two checkboxes:
http://jsfiddle.net/3f66j30y/
I also tried with two radio buttons, but I don't manage to remain them unchecked after having been checked.
Add an onclick event to each checkbox to uncheck the other checkbox
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label
{
padding:10px 10px;
text-align:center;
background:#dedede;
color:black;
height: 20px;
width: 100px;
display:inline-block;
}
input[type="checkbox"]:checked + label
{
padding:10px 10px;
text-align:center;
background:green;
color:white;
height: 20px;
width: 100px;
display:inline-block;
}
<input type="checkbox" id="radio-1" class="radio" onclick="document.getElementById('radio-2').checked = false"/><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" onclick="document.getElementById('radio-1').checked = false"/><label for="radio-2">No</label>
The following in a Vanilla JS solution, which:
binds change events when the DOM is loaded
only binds one change event to the parent container
in the change event, decides what the target is and turns off other checkboxes
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.select-group').onchange = changeEventHandler;
}, false);
function changeEventHandler(e) {
var cbs = document.querySelectorAll('.cb');
cbs.forEach(function(cb) {
if (cb != e.target)
cb.checked = false;
});
}
input[type="checkbox"] {
display: none;
}
label {
padding: 10px 10px;
text-align: center;
background: #dedede;
color: black;
height: 20px;
width: 100px;
display: inline-block;
}
input[type="checkbox"]:checked+label {
padding: 10px 10px;
text-align: center;
background: green;
color: white;
height: 20px;
width: 100px;
display: inline-block;
}
<div class="select-group">
<input id="cb_yes" type="checkbox" value="yes" class="cb" />
<label for="cb_yes">Yes</label>
<input id="cb_no" type="checkbox" value="no" class="cb" />
<label for="cb_no">No</label>
</div>
It can certainly be improved; after all, one obvious point is that you're searching the DOM for the checkboxes every time they change — you could easily cache them. However, this should serve a point and show you how easy it is to work with standard JS.
Use jQuery to achieve this.
$(".radio").change(function() {
var checked = $(this).is(':checked');
$(".radio").prop('checked',false);
if(checked) {
$(this).prop('checked',true);
}
});
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label
{
padding:10px 10px;
text-align:center;
background:#dedede;
color:black;
height: 20px;
width: 100px;
display:inline-block;
}
input[type="checkbox"]:checked + label
{
padding:10px 10px;
text-align:center;
background:green;
color:white;
height: 20px;
width: 100px;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>
Behavior you are looking for is specific to radio buttons. However the problem is - you can't uncheck it, once checked. In this case you can use three radio buttons - yes, no and none (-) - since clearly you want more then two options:
<input type="radio" id="radio-0" name="group-one" class="radio" checked /><label for="radio-0">-</label><br>
<input type="radio" id="radio-1" name="group-one" class="radio" /><label for="radio-1">Yes</label><br>
<input type="radio" id="radio-2" name="group-one" class="radio" /><label for="radio-2">No</label>
If you prefer to stick with two, you can use your checkboxes with a bit of JavaScript to switch the opposite box off:
function radioSwitch(opposite) {
document.getElementById(opposite).checked = false;
}
document.getElementById("radio-1").addEventListener("click",
function() { radioSwitch("radio-2"); });
document.getElementById("radio-2").addEventListener("click",
function() { radioSwitch("radio-1"); });
<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>
Related
I need to uncheck checked radio buttons using jQuery. The buttons themselves are hidden so I am using clicks on the labels to trigger this. So far I have:
HTML
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
<label for="form1_areas2">West Midlands</label></div>
</form>
SCSS
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
&:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
}
JQUERY
$(document).ready(function(){
$("form input[type='radio']:checked + label").click(function(){
$(this).prev().prop( "checked", false );
});
});
Here a CodePen
But this isn't unchecking the radio button. I understand this is not standard functionality for radio buttons, but I need the user to be able to revert the set of radio buttons to their unselected state if desired, while also limiting them to selecting one from the set of options. Any help greatly appreciated.
Cheers
Mike
To enable/disable same radio , You have to use event.preventDefault() to prevent default behavior ( enabling check box when clicking on label, so checked prop will be always set to true ) and make radio enable / disable grammatically as shown in the below snippet :
$(document).ready(function(){
$("label").click(function(e){
e.preventDefault();
$check = $(this).prev();
if($check.prop('checked'))
$check.prop( "checked", false );
else
$check.prop( "checked", true );
//console.log($check.prop("checked"));
});
});
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
}
input[type="radio"]:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
<label for="form1_areas2">West Midlands</label></div>
</form>
You could use next trick:
-Add a data-num attribute.
-Play with data-num on each click to check/uncheck the radio buttons.
Hope it helps:
$(document).ready(function(){
$("input").click(function(){
$("input").not(this).attr("data-num", 1);
var data = $(this).attr("data-num")
if(data==1){
data = 2
$(this).attr("data-num", data);
return;
}
if(data==2){
data = 1
$(this).prop('checked', false);
$(this).attr("data-num", data);
return;
}
})
})
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
}
input[type="radio"]:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london" data-num="1">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands" data-num="1">
<label for="form1_areas2">West Midlands</label></div>
</form>
When I click on the single checkbox, it changes and green colored. But when I check Full day, all checkboxes are checked but color not change. also after checking full Day, I uncheck all times still full day is checked. I'm stuck, what wrong with this code?
$(document).ready(function() {
$('input:checkbox[name="time"]').change(function() {
$('input:checkbox[name="time"]:not(:checked)').parent().removeClass("active");
$('input:checkbox[name="time"]:checked').parent().addClass("active");
});
});
function selectAll(source) {
checkboxes = document.getElementsByName('time');
for (var i in checkboxes)
checkboxes[i].checked = source.checked;
}
.timing {
width: 500px;
}
.timing label {
width: 100px;
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
cursor: pointer;
}
.timing label input {
display: block;
}
.timing label.active {
background-color: rgba(0, 204, 0, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timing">
<label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label>
<label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label>
<label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label>
</div>
<label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label>
<script>
function selectAll(source) {
checkboxes = document.getElementsByName('time');
for (var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
The issue is because you need to trigger a change event on the checkboxes when clicking the 'Select All' option so that their own event handler runs and changes their background colour. This does not occur when setting the checked state manually, so you can use the trigger() method in your code.
You should note though, that you can improve your logic by using toggleClass() and also removing the on* event attribute as they are outdated. Use an unobtrusive event handler as you do for the normal checkboxes. Try this:
$('input:checkbox[name="time"]').change(function() {
$(this).closest('label').toggleClass('active', this.checked);
});
$('#selectall').change(function() {
$('input:checkbox[name="time"]').prop('checked', this.checked).trigger('change');
});
.timing {
width: 500px;
}
.timing label {
width: 100px;
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
cursor: pointer;
}
.timing label input {
display: block;
}
.timing label.active {
background-color: rgba(0, 204, 0, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timing">
<label for="11:30">
<input name="time" class="timess" value="11:30" id="11:30" type="checkbox">
11:30
</label>
<label for="12:00">
<input name="time" class="timess" value="12:00" id="12:00" type="checkbox">
12:00
</label>
<label for="12:30">
<input name="time" class="timess" value="12:30" id="12:30" type="checkbox">
12:30
</label>
</div>
<label for="selectall">
<input type="checkbox" id="selectall" />
Full Day
</label>
I added trigger event. Change event will not get fired if you check checkbox using JS.
function selectAll(source) {
checkboxes = document.getElementsByName('time');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
$('input:checkbox[name="time"]').trigger('change');//Trigger change event to checkbox
}
$(document).ready(function () {
$('input:checkbox[name="time"]').change(function () {
$('input:checkbox[name="time"]:not(:checked)').parent().removeClass("active");
$('input:checkbox[name="time"]:checked').parent().addClass("active");
});
});
function selectAll(source) {
checkboxes = document.getElementsByName('time');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
$('input:checkbox[name="time"]').trigger('change')
}
.timing{width:500px;}
.timing label{width:100px;display:inline-block;border:1px solid #ccc;padding:10px;text-align:center;cursor:pointer;}
.timing label input{display:block;}
.timing label.active{background-color:rgba(0,204,0,1);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timing">
<label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label>
<label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label>
<label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label>
</div>
<label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label>
<script>
function selectAll(source) {
checkboxes = document.getElementsByName('time');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
You need to trigger the change function inside the loop
$(document).ready(function() {
$('input:checkbox[name="time"]').change(function() {
$('input:checkbox[name="time"]').parent().removeClass("active");
$('input:checkbox[name="time"]:checked').parent().addClass("active");
});
});
function selectAll(source) {
checkboxes = document.getElementsByName('time');
for (var i in checkboxes){
checkboxes[i].checked = source.checked;
$('input:checkbox[name="time"]').trigger('change')
}
}
.timing {
width: 500px;
}
.timing label {
width: 100px;
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
cursor: pointer;
}
.timing label input {
display: block;
}
.timing label.active {
background-color: rgba(0, 204, 0, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timing">
<label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label>
<label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label>
<label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label>
</div>
<label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label>
I am trying to implement "changing Div border color" when clicking on one of the radio buttons. It works well for scenario 1 but won't work on scenario 2.
$(":radio:checked").closest(".discount").addClass("checked");
$(":radio").on("change", e => {
const $div = $(e.target).closest(".discount");
console.log($div);
$(".discount").removeClass("checked");
$div.addClass("checked");
});
$(":radio:checked").closest(".discount2").addClass("checked");
$(":radio").on("change", e => {
const $div = $(e.target).closest(".discount2");
console.log($div);
$(".discount2").removeClass("checked");
$div.addClass("checked");
});
.discount {
border: 2px solid #cccccc;
padding: 2px;
padding: 10px;
width: 100%;
text-align: center;
border-radius: 5px;
}
.discount.checked {
border-color: red;
}
.discount2 {
border: 2px solid #cccccc;
padding: 2px;
padding: 10px;
width: 100%;
text-align: center;
border-radius: 5px;
}
.discount2.checked {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label style="width:100%">
<div class="discount">
<input type="radio" name="fruits" checked>Apple</div>
</label>
<label style="width:100%">
<div class="discount">
<input type="radio" name="fruits">Banana</div>
</label>
<label style="width:100%">
<div class="discount2">
<input type="radio" name="drinks" checked>Milk</div>
</label>
<label style="width:100%">
<div class="discount2">
<input type="radio" name="drinks">Zzz</div>
</label>
<label style="width:100%">
<div class="discount2">
<input type="radio" name="drinks">Bbb</div>
</label>
In scenario 2, when clicking on 'Zzz', the Div border "Red" is gone! Anyone know whats wrong ?
There is no need to use multiple clases and such:
(I added another version of the example, where no <div>s were used (and changed the coloring a bit)
$('input[type=radio]:checked').parent().addClass('checked');
$('input[type=radio]').on('change',function(e) {
var thisGroup = $(this).attr('name');
if ($(this).is(':checked')) {
$('input[name='+thisGroup+']').parent().removeClass('checked');
$(this).parent().addClass('checked');
}
});
.discount, .discount-label{
border: 2px solid #cccccc;
padding:2px;
padding:10px;
width:10%;
text-align:center;
border-radius: 5px;
}
.discount.checked,.discount-label.checked {
border-color: red;
}
.discount-label input[type=radio] {
display: none;
}
.discount-label.checked {
background: red;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><div class="discount"><input type="radio" name="fruits" checked>Apple</div></label>
<label><div class="discount"><input type="radio" name="fruits">Banana</div></label>
<label><div class="discount"><input type="radio" name="drinks" checked>Milk</div></label>
<label><div class="discount"><input type="radio" name="drinks">Zzz</div></label>
<label><div class="discount"><input type="radio" name="drinks">Bbb</div></label>
<h2>example two</h2>
<label class="discount-label"><input type="radio" name="fruits2" checked>Apple</label>
<label class="discount-label"><input type="radio" name="fruits2">Banana</label>
<label class="discount-label"><input type="radio" name="drinks2" checked>Milk</label>
<label class="discount-label"><input type="radio" name="drinks2">Zzz</label>
<label class="discount-label"><input type="radio" name="drinks2">Bbb</label>
The problem is that both $(":radio").on("change") are triggered and both the .checked classes are removed but it's only added the current changed checkbox. You can use 1 css class instead or change the javascript to remove all checked classes and add them back like you do on a page load.
updateBorders();
$(":radio").on("change", e => {
const $div = $(e.target).closest(".discount");
console.log($div);
updateBorders();
});
function updateBorders() {
$(".discount").removeClass("checked");
$(".discount2").removeClass("checked");
$(":radio:checked").closest(".discount").addClass("checked");
$(":radio:checked").closest(".discount2").addClass("checked")
}
Full JSFiddle here.
I am attempting to create a check box with an X instead of a check using an input box. However, some I want to work as a radio button (when you click one, the other's get "un-checked").
Basically, a group of three check boxes that only allows 1 box to have the check in it at a time.
Does anyone know an easy way to accomplish the radio button-esq approach to this without creating a specific function for each group of check box's?
HTML
<input name="box1" id="box1" class="checkBox" value="" readonly="readonly" onclick="return checkBox('box1')">
CSS
.checkBox { background-color:#fff; margin: 0; border: 0; padding: 0; border:1px solid #000; text-align: center; cursor: default;font-family: 'Arial Narrow', Arial, sans-serif;font-size:11px;font-weight:bold;width:1.1em;height:1.1em; }
Function
function checkBox(box) {
x = document.getElementById(box).value;
document.getElementById(box).value = (x == "X") ? "" : "X";
}
You can use custom radio buttons (css only) that looks like checkbox (Demo on jsBin and Demo on jsFiddle)
CSS:
div.radios > label > input {
visibility: hidden;
}
div.radios > label {
display: inline-block;
margin: 0 0 0 -10px;
padding: 0 0 10px 0;
height: 20px;
cursor:pointer;
}
div.radios > label > img {
display: inline-block;
padding: 0px;
height:20px;
width:20px;
background: none;
vertical-align:top;
}
div.radios > label > input:checked +img {
background: url(https://cdn2.iconfinder.com/data/icons/picons-essentials/71/no-24.png);
background-repeat: no-repeat;
background-position:center center;
background-size:20px 20px;
}
HTML:
<div class='radios'>
<label title="item1">
<input type="radio" name="foo" value="0" /> <img /> Radio One
</label>
<label title="item2">
<input type="radio" name="foo" value="1" /> <img /> Radio Two
</label>
</div>
You can give the radio group an identifier class, for instance "radio" and onclick reset them and set val of the clicked one. A jquery sample would be
<input class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">
$(".radio").click(function() {
$(".radio").val('');
$(this).val('X');
});
For a pure CSS solution (that actually validates), you could use something like:
<input id="rd1" type="radio" name="opt" /><label for="rd1"></label>
<input id="rd2" type="radio" name="opt" /><label for="rd2"></label>
<input id="rd3" type="radio" name="opt" /><label for="rd3"></label>
And this is the CSS for it:
.radio-special {
display: none;
}
.radio-special + label {
background: #ddd;
height:24px;
width: 24px;
box-shadow: inset 0 0 2px 2px #aaa;
display: inline-block;
}
.radio-special:checked + label {
background: url('https://cdn1.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/20/Black_Remove.png') #ddd no-repeat 2px 2px;
}
Note that this will still look a bit weird in the html side of it, but at least its valid markup.
Check how that displays on older versions of IE. It works fine on IE10.
Fiddle
Thanks for everyone's help! I've taken everyone's advice and decided to use a custom image radio/check box through css.
This method will not work for IE7/8 because of the :checked attribute but all you need to do is use selectivizr and everything should run smoothly.
HTML
<input id="option_1" name="option1" type="radio">
<label for="option_1">Option 1</label>
<input id="option_2" name="option2" type="radio">
<label for="option_2">Option 2</label>
<input id="option_3" name="option3" type="radio">
<label for="option_3">Option 3</label>
CSS
input[type='checkbox'], input[type='radio'] { opacity: 0; float: left; width: 14px; }
input[type='radio'] + label, input[type='checkbox'] + label {
margin: 0;
margin-right:-10px; /* Position between the box+label */
clear: none;
padding: 1px 1px 1px 20px; /* Position of the box+label */
cursor: pointer;
background: url('emptyBox.png') left center no-repeat;
float:left;
}
input[type='radio']:checked + label, input[type='checkbox']:checked + label {
background-image: url('selectedBox.png');
}
How to create regular radio buttons to like normal buttons styled with css?
Here are my radio buttons:
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Radio1</label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Radio2</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Radio3</label>
</div>
And my css:
.radio-toolbar {width:410px;}
.radio-toolbar input[type="radio"] {
display:none;
}
.radio-toolbar label {
display:inline-block;
background:#FFF;
font-family:"Arial Black", sans-serif;
font-size:12px;
color:#666666;
width:106px;
padding-left:4px;
}
.radio-toolbar [type="radio"]:checked + label {
background:url("../images/radiochecked.png") no-repeat;
color:#FFF;
}
.radio1 [type="radio"]:checked + label {
background:url("../images/radio1.png") no-repeat;
color:#FFF;
}
.radio2 input[type="radio"]:checked + label {
background:url("../images/radio2.png") no-repeat;
color:#FFF;
}
.radio-toolbar label:hover {background-color:#bbb;
background:url("../images/radiohover.png") no-repeat;
color:#FFF;
}
.radio2 label:hover {background-color:#bbb;
}
It involves hiding the radio button element and putting in a different element instead (at runtime, to maintain backward compatibility with non-JS-enabled browsers), then echoing changes to the new element to the hidden radio button's state.
As you're already using jQuery, you might consider jQuery UI, which has exactly this functionality.