Radio button filled with color - javascript

I was trying to make my radio button looks like checkbox. I have made it OK but the problem i am facing when i tried to fill it up with color. Means in default stage it's white and when i clicked it fills with black. But now i want to make it as different colors based on title and when i clicked it should filled with that color only. How do i make it ?
<label class="active">
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
Fiddle

You can add data-title to your label and give color to that and i have made a new style element which will change your style attribute of the radio button.
please check the below code
$(document).ready(function() {
$('label').click(function() {
var title = $(this).data('title');
$('.active').removeClass("active");
$(this).addClass("active");
$("<style> label.active span:after{ background-color: "+title+";} </style>").appendTo("head");
});
$('input:checked').trigger('click');
});
label {
width: 125px;
display: block;
float: left;
}
label input {
display: none;
}
label span {
display: block;
width: 17px;
height: 17px;
border: 1px solid black;
float: left;
margin: 0 5px 0 0;
position: relative;
}
label.active span:after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="active" data-title='red'>
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label data-title='green'>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label data-title='blue'>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='orange'>
Address2
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='#ff11dd'>
Using Color Code
<span></span>
<input type="radio" name="n1" value="address">
</label>

Having different colors based on a title (or a value)... I don't think it is possible with just CSS.
In revenge, since you exactly know their order, you can set different colors using nth-child(n).
Try:
label:nth-child(1).active span:after {
background: red;
}
label:nth-child(2).active span:after {
background: orange;
}
label:nth-child(3).active span:after {
background: green;
}
Updated Fiddle

Related

JS function conflicting with CSS style

I have a radio button part into a large form which is styled in a way that when it's hovered or checked, it has a different background color. Though, I have an important js function for the rest of the form which keeps the style from working. It took me time to understand that the conflict came from that function, but I have no clue on how to solve this.
Here's what I got:
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
return false
});
obj_critere_form = new critere_form();
obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>
The problem is return false; in the click handler. That's equivalent to event.preventDefault();. The default action of clicking on a label is to click on the element that the label is associated with by the for attribute; return false; prevents that from happening, so clicking on the label doesn't check the button.
I'm not sure why you have that in the click handler in the first place. All it does is prevent clicking on the label from working.
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
//return false
});
//obj_critere_form = new critere_form();
//obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>
In this case it looks like you're using a library for the form which could have it's own styles.
Use this at the end of the CSS you need to come through but use it sparingly and with caution.
//example
color: blue !important;

Change label color when checkbox checked

<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
I want to apply below CSS for my <label> when checkbox is checked:
border-bottom: 1px solid #7f7f7f;
Can anyone help me to resolve?
If you are open to modifying your HTML structure slightly, you could do this without any Javascript.
You need to place the label after the input, so it allows selecting the label using the adjacent selector (+), and then based on :checked pseudo selector, you can toggle the border on the label.
Check the snippet below to see how it works:
#myCheckbox:checked + label {
border-bottom: 1px solid #7f7f7f;
}
<input type="checkbox" id="myCheckbox">
<label class="black" for="myCheckbox">
Blacks
<span class="checkmark"></span>
</label>
Use parent() and toggleClass method from jquery to select the label and add/remove class
function toggleCheck(elem) {
console.log(elem)
$(elem).parent().toggleClass('borderBottom')
}
.borderBottom {
border-bottom: 1px solid #7f7f7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="black">Blacks
<input type="checkbox" onchange="toggleCheck(this)">
<span class="checkmark"></span>
</label>
label{
position: relative;
}
.checkmark{
position: absolute;
width: 100%;
left: 0;
bottom: -4px;
height: 1px;
background: red;
}
input:checked + .checkmark{
background: green;
}
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
Find your checkbox inside your span and use add remove class.
$('.black').find('input[type=checkbox]').change(function() {
if (this.checked)
$(this).parent().addClass('testClass');
else
$(this).parent().removeClass('testClass');
});
.testClass {
border-bottom: 1px solid #7f7f7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
$( 'label' ).on( 'click', 'input:checkbox', function () {
$( this ).parent().toggleClass( 'highlight', this.checked );
});
Apply below style for label in css
label.highlight{border-bottom: 1px solid #7f7f7f;

Add different class to all radio buttons previous to the checked one

I am trying to add different class to each radio button previous to the checked one. that said, say if I click on button No3 button No1 should get tclass1 and button No2 should get tclass2...and so on if other button is selected.
here is a sample code
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
here is the script I use
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
//I use these two lines to clear the last class if exists on each radio button before adding scpecific ones but it does not work
var lastClass = $(this).closest("ul").find("li label").attr('class').split(' ').pop();
$(this).closest("ul").find("li label[class*=tclass]").removeClass(lastClass);
//here I add specific classs to each radio
$(this).closest("li").prevAll("li").each(function(i) {
i++;
$(this).find("label").addClass("tclass" + i);
});
});
});
here is the demo
FIDDLE DEMO
as far as I can see the problem is with deleting classes. any help would be much appreciated :(
If I understand your question correctly, the struggle is with adding and removing dynamic class names on a set of elements.
I'd suggest to use the same method when determining the relevant class name for an element, whether you want to remove or add it.
Check out this approach:
$(document).ready(function(e) {
// Takes a selection index, an element, and the element's index
// Removes or adds a classname to the element's label based on
// comparing its own index to the selection's index.
var modifyClass = function(selectedIndex, element, index) {
var needsClass = index < selectedIndex;
$(element)
.next("label")
.toggleClass("tclass" + (index + 1), needsClass);
}
$("input[type=radio]").click(function() {
var radioBtns = $("input[type=radio]");
var checked = radioBtns.index(this);
var btnArray = radioBtns.toArray();
// For each radio button, check if it needs a class (index < selected index)
// and add or remove the right class name
btnArray.forEach(modifyClass.bind(null, checked));
})
});
form {
max-width: 500px;
margin-top: 25px;
}
form ul li {
display: inline-block;
width: 20%;
text-align: center;
vertical-align: top;
float: left;
position: relative
}
input {
position: relative;
top: 0;
left: 50%;
margin-left: -6px;
display: none;
}
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: green;
}
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: gray;
}
label {
padding-top: 55px;
}
/*this class should be added*/
input[type=radio] + label.tclass1::before {
background-color: yellow;
}
input[type=radio] + label.tclass2::before {
background-color: orange;
}
input[type=radio] + label.tclass3::before {
background-color: red;
}
input[type=radio] + label.tclass4::before {
background-color: blue;
}
input[type=radio] + label.tclass5::before {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label class="test" for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label class="test" for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label class="test" for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label class="test" for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label class="test" for="radio5">five</label>
</li>
</ul>
</form>
Take a look at this,
$(document).ready(function() {
$("input[type=radio]").click(function(){
var counter = 0;
var found = false;
$("input[type=radio]").each(function()
{
counter++;
if(found)
{
$(this).next("label").removeClass("tclass"+counter);
}
else
{
$(this).next("label").toggleClass("tclass"+counter,true);
if($(this).is(':checked'))
{
found = true;
}
}
});
});
});
https://jsfiddle.net/8jct6tfs/14/
I think this is what you want. let me know if something isn't working or isnt what you meant.

Radio button doesnt work inside css accordion

I have a radio button inside a css accordion and for some reason it doesnt work. Maybe the css I'm using for the accordion is overriding the radio button? maybe because the accordion is made from a check box that is causing problems? I've also put dojo controls inside the accordion and some work, some don't Below is the code: The first radio button outside the accordion works fine
HTML:
<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
<div>
<div style="width: 450px;
height: 80px"></div>
<input type="checkbox" id="checkMTF-1" checked="checked" />
<label for="checkMTF-1">Input System Info</label>
<article>
<input type="radio" name="colors" value="green" />Green <!--this doesnt work-->
<input type="radio" name="colors" value="red" />Red</article>
</div>
<div>
<input type="checkbox" id="checkMTF-2" />
<label for="checkMTF-3">Input Marking Information</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
<div>
<input type="checkbox" id="checkMTF-3" />
<label for="checkMTF-4">Complete and Submit</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
</section>
css:
/Mark Ticket Form Accordion/
#accordionMTF input {
display: none;
}
#accordionMTF label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordionMTF label:hover {
background: #ccc;
}
#accordionMTF input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordionMTF article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordionMTF article p {
padding: 1em;
}
#accordionMTF input:checked article {
}
#accordionMTF input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
I have a fiddle:
here
Thanks
So long as you continue to use the same HTML structure, all you need to do is rework your css a little bit. The follow css
#accordionMTF input {
display: none;
}
Needs to look like this
#accordionMTF > div > input[type='checkbox'] {
display : none;
}
This is an excellent attempt to create an accordion without javascript. You might also consider incorporating CSS3 animations.
There is also a bug where your labels have the wrong for attribute value.
Here is a working fiddle http://jsfiddle.net/czo2m22s/21/
The developer of you accordion has decided to hide ALL inputs (!?)
#accordionMTF input {
display: none;
}
A more sane approach would be to give the inputs that are required for the accordion functionality a class (.hidden) and use that as a selector instead of blanket hidding all inputs:
<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />
.hidden {
display: none;
}
WORKING EXAMPLE
here is the reason:
accordionMTF input {
display: none;
}

validate only last radio button of a group of radio

i have a form with questions, and need validate these questions, answered with radio buttons, this form have 20 or more questions, the questions have options 1,2,3. 1 = good, 2 = problem, 3 = critic. the user can check only 5 times the option 3. how i can do it with javascript?
i use only normal validate to unchecked options.
here a preview of radios:
JSFiddle
<div class="inline">
<label for="option1">
<input type="radio" name="group[1]" value="1">1</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">2</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">3</label>
</div>
CSS
.inline {
display: inline;
}
.inline label, input[type="radio"] {
float: left;
}
.inline label {
display: block;
background: #eee;
margin-left: 5px;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
color: #333;
font-family: arial, sans-serif;
}
.inline input[type="radio"] {
display: block;
}
I guess value="1" in every radio was a typo and you meant
<label for="option1">
<input type="radio" id="option1" name="group[1]" value="1">1</label>
<label for="option2">
<input type="radio" id="option2" name="group[1]" value="2">2</label>
<label for="option3">
<input type="radio" id="option3" name="group[1]" value="3">3</label>
Then you can find how many checked radios with value="3" are there using
jQuery('input[value="3"]:checked').length
and act accordingly if the length is greater than 5.
Edit: jsfiddle demo (with the limit set to 2, not 5).

Categories