Develop Reference

Updating the CSS style of elements based on a radio buttons

I have coded 10 radio buttons which work essentially like a star rating. What I want to do is have another 10 button-like circular elements which update based on what radio button is pushed. For example, if the 9th radio button is pushed, I want only the first button-like circular element to get highlighted (change it's css class). Or if the 5th button is pushed, then I want the 5th circular element to update.
I've looked all over for something similar like maybe using a value to display stars but I can't seem to find anything for what I specifically want to do. I would appreciate all help.
Basically my radio buttons look like this (with ten buttons in the actual code but condensed to three buttons on here):
<div class="points">
<span><input type="radio" name="amount_offered" id="point3" value="3">
<label for="point3">3</label></span>
<span><input type="radio" name="amount_offered" id="point2" value="2">
<label for="point2">2</label></span>
<span><input type="radio" name="amount_offered" id="point1" value="1">
<label for="point1">1</label></span>
</div>
The other circular buttons look like this:
<div class="pointskeep">
<span><id="point3keep"><label>3</label></span>
<span><id="point2keep"><label>2</label></span>
<span><id="point1keep"><label>1</label></span>
</div>
My css code looks like:
.points span label {
border-radius:50%;
color:black;
background:white;
}
.points span:hover ~ span label,
.points span:hover label,
.points span.checked label,
.points span.checked ~ span label {
background:goldenrod;
color:white;
}
.pointskeep span label {
border-radius:50%;
background:goldenrod;
color:white;
}
.pointskeep span.checked label,
.pointskeep span.checked ~ span label {
color:black;
background:white;
}
My js looks like this:
$(document).ready(function(){
// Check Radio-box
$(".points input:radio").attr("checked", false);
$('.points input').click(function () {
$(".points span").removeClass('checked');
$(".nopoints span").removeClass('checked');
$(this).parent().addClass('checked');
});
I've been fiddling a lot with the javascript but I just can't seem to figure out how to update the non-radio elements to their "checked" css style, when the appropriate radio element is clicked. Is there a better approach?

Try this:-
$(document).ready(function () {
$('input').click(function () {
$('input:not(:checked)').parent().removeClass("checked");
$('input:checked').parent().addClass("checked");
});
});
.points span label {
border-radius:50%;
color:black;
background:white;
}
.points span:hover ~ span label,
.points span:hover label,
.points span.checked label,
.points span.checked ~ span label {
background:goldenrod;
color:white;
}
.pointskeep span label {
border-radius:50%;
background:goldenrod;
color:white;
}
.pointskeep span.checked label,
.pointskeep span.checked ~ span label {
color:black;
background:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="points">
<span><input type="radio" name="amount_offered" id="point3" value="3"/>
<label for="point3">3</label></span>
<span><input type="radio" name="amount_offered" id="point2" value="2"/>
<label for="point2">2</label></span>
<span><input type="radio" name="amount_offered" id="point1" value="1"/>
<label for="point1">1</label></span>
</div>
<div class="pointskeep">
<span><id="point3keep"><label>3</label></span>
<span><id="point2keep"><label>2</label></span>
<span><id="point1keep"><label>1</label></span>
</div>

This is how would go about it.
If a user clicks the button I would get the value of the input
Get all the non button.
Compare index with value
add class accordingly
$(document).ready(function () {
$('input').click(function () {
$('input:not(:checked)').parent().removeClass("checked");
$('input:checked').parent().addClass("checked");
let val = parseInt($('input[name=amount_offered]:checked').val());
$('.point').each(function(index,element ){
if(index+1>val)
$( element ).addClass('checked');
else
$( element ).removeClass('checked');
});
});
});
.points span label {
border-radius:50%;
color:black;
background:white;
}
.points span:hover ~ span label,
.points span:hover label,
.points span.checked label,
.points span.checked ~ span label {
background:goldenrod;
color:white;
}
.pointskeep .checked{
padding: 5px;
border-radius: 50%;
background:goldenrod;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="points">
<span><input type="radio" name="amount_offered" id="point3" value="3"/>
<label for="point3">3</label></span>
<span><input type="radio" name="amount_offered" id="point2" value="2"/>
<label for="point2">2</label></span>
<span><input type="radio" name="amount_offered" id="point1" value="1"/>
<label for="point1">1</label></span>
</div>
<div class="pointskeep">
<span id="point3keep" class="point"><label>3</label></span>
<span id="point2keep" class="point"><label>2</label></span>
<span id="point1keep" class="point"><label>1</label></span>
</div>

How to uncheck a checkbox when another one is checked?

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>

click function works with no label but not with a label

I have some JS for some radio buttons that works with no label wrapped around the radio buttons, but as soon as I add my label class to the radio buttons to style the radio buttons according to my theme, it stops working.
Here is the JS
$("#bn_only_yes").click(function(){
$("#bn_yes").attr("checked", "checked");
});
And here is the code it works fine with
<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
<!-- ENDIF -->
<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
{CURRENCY}
<!-- ENDIF -->
And here is the code that adds the label class styling to my inputs but the JS code stops working
<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
</label>
<!-- ENDIF -->
<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
</label>
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
{CURRENCY}
<!-- ENDIF -->
I have even tried adding the input ID to the label but it still won't work.
Anyone have any ideas how I can include the label class in the JS as well as the input ID.
ADDING TZ-RADIOBUTTON CSS
header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-hmenu a, .tz-vmenu a, .tz- slidenavigator > a, .tz-checkbox:before, .tz-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-slidenavigator > a, .tz- checkbox:before, .tz-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label.tz-radiobutton:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
vertical-align: top;
content: ' ';
}
label.tz-radiobutton
{
cursor: pointer;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 16px;
display: inline-block;
color: #323C43 !important;
position: relative;
}
.tz-radiobutton>input[type="radio"]
{
vertical-align: baseline;
margin: 0 5px 0 0;
}
label.tz-radiobutton.active:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}
label.tz-radiobutton.hovered:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}
label.tz-radiobutton input[type="radio"]
{
display: none;
}
label.tz-radiobutton.tz-checked:after
{
content: url('../images/radiobuttonicon.png');
position: absolute;
line-height: 12px;
left: 2px;
top: 2px;
}

Seeing your CSS I guess you want to add a style to the label of #btn_yes on click: label.tz-radiobutton.tz-checked:after {} and display an icon with it.
1) In the CSS you've posted is a closing } missing in the line above header, footer, ....
2) To get the style working you need to add a class tz-checked to the label:
$("#bn_only_yes").click(function(){
$("#bn_yes").parent().addClass('tz-checked');
});
The third FIDDLE.
And if you want to set the attribute checked on the checkbox too:
$("#bn_only_yes").click(function(){
$("#bn_yes").attr('checked', 'checked').parent().addClass('tz-checked');
});

You will never see the checked input because of
label.tz-radiobutton input[type="radio"] {
display: none;
}

Hide radio buttons and just show labels in django form (radio select)

I want to remove the radio buttons and just show the yes or no labels. In order to do that I hid the radio input and used the css3 selector (:checked + label) to change background color according to selection. But this is not working for some reason.
HTML (from Django Template)
<div class="questionnaire-radio">
<label>
<input class="selector" name="mdq_answer_1" required="True" type="radio" value="y"> yes
</label>
</div>
CSS
.questionnaire-radio input[type=radio] {
display: none;
padding-top: 20px;
}
.questionnaire-radio input[type=radio]:checked + label {
background-color: #28c3ab;
font-weight: bold;
text-transform: uppercase;
}
.questionnaire-radio label {
font-weight: normal;
width: 100%;
border: solid #28c3ab;
border-radius: 100px;
margin: 0;
cursor: pointer;
}
.questionnaire-radio label:hover {
font-weight: bold;
text-transform: uppercase;
background-color: #28c3ab;
cursor: pointer;
}
Any help will be highly appreciated. I am using Chrome as my browser. I am open to jQuery solutions (if necessary).

To use the input[type=radio]:checked + label the way you want things need to be formatted a certain way. Input needs to be above the label you are trying to access
see it working in this fiddle
http://jsfiddle.net/QBM5/egv8K/1/
<div class="questionnaire-radio">
<input id="aaa" class="selector" name="mdq_answer_1" required="True" type="radio" value="y" />
<label for="aaa">yes</label>
<input id="bbb" class="selector" name="mdq_answer_1" required="True" type="radio" value="n" />
<label for="bbb">no</label>
I made some assumptions and added some markup to make sure it worked, but you should be able to get it to work following this example.

"X" check box with an input box

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');
}