Develop Reference

How to change button color when radio input is selected, but input is wrapped in div before label?

I am trying to make our dinky radio buttons into lovely toggle buttons on our donation page. The HTML cannot be modified, and as it stands the inputs are wrapped in divs, then followed by the labels. I have zero knowledge of JS/jQuery and I imagine this task requires some.
Here is my fiddle: https://jsfiddle.net/cgz63qhd/
body {
padding: 10px;
font-family: sans-serif;
}
div.donation-levels {
margin: 3px 0;
}
.donation-level-container {
display: inline-block;
}
.donation-level-container input {
visibility: hidden;
}
.donation-level-amount-container {
text-align: center;
margin: 5px 2px;
padding: 0.7em 2em;
color: #ffffff;
background-color: #1a92b4;
border-radius: 5px;
display: inline-block;
cursor: pointer;
font-size: 22px;
}
.donation-level-amount-container:hover {
background: #e8525f;
color: #ffffff;
}
.donation-level-label-input-container input:checked~label {
background: #e8525f;
}
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
</div>
<label for="level_flexibleexpanded5942" onclick="">
<div class="donation-level-amount-container">
$35.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
</div>
<label for="level_flexibleexpanded5943" onclick="">
<div class="donation-level-amount-container">
$60.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
</div>
<label for="level_flexibleexpanded5944" onclick="">
<div class="donation-level-amount-container">
$120.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
</div>
</div>
Here is my inspiration donate page: https://action.audubon.org/donate/now
Alas, their labels are set up better so I think they were able to make the buttons with pure CSS (?).
My buttons currently are looking decent, are sized fine and colored nicely, but they just won't stay that coral color when clicked! Can someone help me out?
I've seen a lot of questions here on this topic but I can't seem to get anything to work.
I'm sure there are other issues in the code, please point them out if you see them!

$(".donation-level-amount-container").on("click", function() {
$('.donation-level-amount-container').each(function() {
$(this).removeClass('active');
});
$(this).toggleClass('active');
})
And css
.active {
background:#e8525f;
color:#ffffff;
}
Working fiddle:
https://jsfiddle.net/29exoa4k/2/

You need this piece of jQuery:
$(function() {
$(document).on('click','.donation-level-amount-container',function(){
$('.donation-level-amount-container').removeClass('active');
$(this).addClass('active');
});
});
Update also to this CSS:
.donation-level-amount-container:hover, .donation-level-amount-container.active {
background:#e8525f;
color:#ffffff;
}
Here is the updated jsfiddle.

You want something like this
$(".donation-level-amount-container").on("click", function() {
$(this).css("background", "red");
})
or to toggle an active class
$(".donation-level-amount-container").on("click", function() {
$(this).toggleClass("active");
})

You need this
$(".donation-level-amount-container").on("click", function() {
$(".donation-level-amount-container").css("background", "#1a92b4");
$(this).css("background", "#e8525f");
})
and css !important for background property
.donation-level-amount-container:hover {
background:#e8525f!important;
color:#ffffff;
}
here's your updated fiddle https://jsfiddle.net/cgz63qhd/3/

Indeed, this can not be done with pure CSS, since you can't traverse upward in the DOM using CSS selectors. As previous answers mentioned, it can easily be done with jQuery, but it can also be done in vanilla javascript.
var donationButtons = document.querySelectorAll('.donation-level-amount-container');
var defaultBg = '#1a92b4';
var activeBg = '#f00';
donationButtons.forEach(function(btn){
btn.onclick = function(){
donationButtons.forEach(function(btn){
// deselect previously selected buttons
btn.style.background = defaultBg;
});
this.style.background = activeBg;
}
});
I'm certain this can be done smoother, but this is the first solution that popped up in my head.

Trigger radio button click without the click

I have two custom styled radio buttons that look like below [just an example]
li {
width: 100px;
border: 1px solid black;
display: inline-block;
}
<ul>
<li>
<input type="radio" name="radio-test" id="radio1">
<div>
<label for="radio1">Radio One</label>
</div>
</li>
<li>
<input type="radio" name="radio-test" id="radio2">
<div>
<label for="radio2">Radio Two</label>
</div>
</li>
</ul>
Once this has been made to look prettier, I would ideally want that clicking anywhere inside the box enclosing a radio button should trigger activation of that choice.
My team mates have used custom styles and images to show selection and hence I do not want to modify CSS.
I was trying to think of a way to implement mentioned functionality with Javascript.
Attack a click event-handler on the li and trigger a click on the underlying input but that causes an infinite recursion of event triggers.
This raised 2 questions in my mind:
Is there a way to stop the the click recursion? I tried preventDefault and stopPropagation on the JS triggered click but
they do not seem to accomplish what I want.
Can we user JavaScript(or jQuery if needed) to differentiate between a real mouse click and a JS triggered click event?

You were on the right track. You just need to stop the propagation from the input back up to the list item:
$('li').click(function() {
$(this).find('input').click()
})
$('input').click(function(e) {
e.stopPropagation();
})
li {
width: 100px;
border: 1px solid black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<input type="radio" name="radio-test" id="radio1">
<div>
<label for="radio1">Radio One</label>
</div>
</li>
<li>
<input type="radio" name="radio-test" id="radio2">
<div>
<label for="radio2">Radio Two</label>
</div>
</li>
</ul>

Image Radio Button Checked Display Issues

I am using image radio buttons which are working fine. However one of the radio buttons needs to be checked by default. However when this is set, it will not display the border around the checked image as it will when you click to select.
I have tried quite a few different things such has checked via html as well as javascript onload to no avail.
(Note there is only one radio button to select, this is because currently there is no 2nd option however there will be in the near future hence why we are pre checking it)
Any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
Cheers :)

This could actually be done much simpler :
Demo
Javascript :
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML (make sure you use unique ids !)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
And this is the main trick in CSS (only for IE >= 9) :
input.hidden:checked + a {
border:5px solid #d13a7a;
}
Edit : Demo for older versions of IE compatibility

to show the css to default checked you have to add the css 'class' or 'id' by default to the pre checked radio button and its respective href tag.

Priority field in html form

I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.
The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field.
This is the HTML i am using for priority
` <input type="radio" id="1" class="priority">
<input type="radio" id="2" class="priority">
<input type="radio" id="3" class="priority">
<input type="radio" id="4" class="priority">
<input type="radio" id="5" class="priority">`
I am using spring MVC framework.
Any help would be appreciated

UPDATE: updated FIDDLE
add value attribute to the radio buttons like
<input type="radio" name="1" id="r1" value="a rating">
then some script to read the radio button values like:
var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr);
I've tried some workaround for the sake of "changing color" in this Fiddle
Added this html, to act as the radio buttons that changes color:
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
with this css, to take it under the radio buttons:
.circ{
height: 12px;
width: 12px;
border-radius: 50%;
background: gray;
display: inline-block;
position: relative;
bottom: 20px;
margin-left: 5px;
margin-right: 4px;
}
Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.
PS: You can't just edit radio button's background color, instead use background images

I am not sure if i understud your question correct, but if so this demo code (jsfiddle) might help.
(its just a demo, and would still have to be adapted for your needs)
It simply sets the color class on the Click event of every RadioButton.
CSS
.color1 {
background:red;
}
.color2 {
background:green;
}
.color3 {
background:yellow;
}
HTML
<div class="priority">
<input type="radio" name="1" id="1">
<input type="radio" name="1" id="2">
<input type="radio" name="1" id="3">
<input type="radio" name="1" id="4">
<input type="radio" name="1" id="5">
</div>
Script
$(function () {
$(".priority input").on("click", function () {
$(".priority").attr("class", "priority color" + this.id);
});
})
tested with Chrome 34+

As per your requirement you can use jQuery plugin Colourful rating system. It comes with good options so that you can set the color as required.
DEMO
example as follows:
the HTML
<ul id="rating">
<li>This is just a piece of crap</li>
<li>Nothing too new or interesting</li>
<li>Not bad, I like it</li>
<li>I would like to see more of this</li>
<li>This is the best thing I've seen</li>
</ul>
CSS
#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }
#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
box-shadow:0 0 5px #888; border-radius:40px; }
After we're done loading jQuery and the Color plugin, we're ready to use jQuery to now animate the circles to the right colour and display the text.
// Variable to set the duration of the animation
var animationTime = 500;
// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];
// Add rating information box after rating
var ratingInfobox = $("<div />")
.attr("id", "ratinginfo")
.insertAfter($("#rating"));
// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
$("#rating li a").each(function() {
if($(this).parent().index() <= nrOfRatings) {
$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
}
});
};
// Handle the hover events
$("#rating li a").hover(function() {
// Empty the rating info box and fade in
ratingInfobox
.empty()
.stop()
.animate({ opacity : 1 }, animationTime);
// Add the text to the rating info box
$("<p />")
.html($(this).html())
.appendTo(ratingInfobox);
// Call the colourize function with the given index
colourizeRatings($(this).parent().index());
}, function() {
// Fade out the rating information box
ratingInfobox
.stop()
.animate({ opacity : 0 }, animationTime);
// Restore all the rating to their original colours
$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});
// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
e.preventDefault();
alert("You voted on item number " + ($(this).parent().index() + 1));
});
for complete documentation and source code click HERE

Checkboxes/radiobuttons unresponsive in expandable list form

Edit to answer: OK, so it seems this problem has come up before. The key seems to be in the return false; statement in the js prepareList function. I commented it out and now the code works fine. For more information and a more complete answer, here is the previous version of the question.
EDIT: Here's a jsfiddle that reproduces the error.
I'm trying to make a form using the expandable list code found here, and my checkboxes and radio buttons are either unresponsive or glitchy. They both know they're being pressed, they change to the depressed image when I click on them, but they don't update their value. For radio buttons, I can click one and it works, but then the others in that group become unresponsive. I have a dummy php page to just print out the results of the form, but it doesn't appear to be receiving any data. NOTE: This is my first website project, there may be something completely obvious that I'm just missing.
Here's a sample of the HTML:
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
And here's the javascript for the list function:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
And the relevant CSS:
#listContainer{
margin-top:15px;
}
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}

The issue here is with event.preventDefault() in your code. It's keeping the checkboxes / radio buttons from performing their default behavior. Removing that entry will allow the input tags to function normally. But they will no longer trigger the expand and collapse functionality you're looking for.
You'll need to modify your JS to also listen for the click on the checkboxes. Here are some similar situations that may help you:
making on-click events work with checkboxes
clicking on a div to check / uncheck a checkbox