Radio Input Check/Uncheck when clicked on label

Radio Input Check/Uncheck when clicked on label - javascript

I am creating a customer preference section where the customer can select if he is interested in a fruit or not by clicking on one of two radio buttons. The problem is, I want to allow customer to leave his preference undefined on a fruit by allowing null radio button/uncheck the radio button when clicked again.
The JS is only adding classes to the radio buttons loaded via php with checked="checked" and adding a class to the parent label for CSS because on front end it appears as a button group as follows:
I tried looking it up stack overflow but no solutions worked.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
});
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form .radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>

What you have is all a bit less than optimal.
First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original.
Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. Use .prop() instead if needed.
One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.
Don't use the click event, use change, (what if it changes via script?)
$('#customer_preferences_form')
.on('click','label', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var myradio = $(this).find('input[type=radio]');
var isChecked = myradio.is(":checked");
myradio.prop("checked",!isChecked );
myradio.trigger('setlabelstate');
});
$('#customer_preferences_form')
.on('change setlabelstate','input[type=radio]',function() {
// I used the label here to prevent the DIV sibling with title from
// having that class added - only the label siblings are needed.
var mySiblings = $(this).parent('label').siblings('label');
var radios = $(this).parent('label')
.add(mySiblings );
radios.each(function(){
var isChecked = $(this).find('input[type=radio]').is(":checked");
$(this).toggleClass("radio_checked", isChecked );
});
});
// custom event to set that initial state
$('#customer_preferences_form')
.find('input[type=radio]')
.trigger('setlabelstate');
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form label.radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customer_preferences_form">
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
</div>

Check this out it's working.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
});
$('input[type=radio]').hide();
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE : If you want to uncheck radio button if clicked again. Check below snippet
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input[type=radio]').hide();
if ($('input:checked').is(':checked')) {
$('input:checked').prop('checked', true);
$('input:checked').data('waschecked', true);
}
$('input[type="radio"]').click(function() {
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true) {
$radio.prop('checked', false);
$radio.data('waschecked', false);
$radio.parent().removeClass("selected");
} else {
$radio.prop('checked', true);
$radio.data('waschecked', true);
$radio.parent().addClass("selected");
}
$radio.parent().siblings('label').children('input[type="radio"]').data('waschecked', false);
$radio.parent().siblings('label').removeClass("selected");
});
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1" > Not Interested
</label>
<label>
<input type="radio" name="mango" value="2" checked="checked"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE 2: Fixed the bug in snippet 2 reported by Junaid Saleem

Related

Priority Indication Button

I want to show a priority setting button using HTML, CSS and jQuery to set the priority as High/Medium/Low as shown in the attached images and want to show selected priority in full word in a label next to it. Is there any way to achieve this?
I tried below, but its design is not similar to what I have attached here.
$(function() {
$('input:radio[name=priority]').change(function() {
var id = $(this).attr("id");
$("#text").html($(this).val());
$('label[for=' + id + ']').checked = true;
});
});
[type="radio"]:checked + span:after {
border: none;
background-color: unset;
}
[type="radio"]:not(:checked) + span:before {
border: none;
}
input[type="radio"] {
width: 30px;
height: 30px;
border-radius: 15px;
/*border: 2px solid #1FBED6;*/
background-color: #F1F1F1;
-webkit-appearance: none;
/*to disable the default appearance of radio button*/
-moz-appearance: none;
}
input[type="radio"]:focus {
/*no need, if you don't disable default appearance*/
outline: none;
/*to remove the square border on focus*/
}
#h:checked {
/*no need, if you don't disable default appearance*/
background-color: red;
}
#m:checked {
/*no need, if you don't disable default appearance*/
background-color: orange;
}
#l:checked {
/*no need, if you don't disable default appearance*/
background-color: lightgreen;
}
input[type="radio"]:checked~span:first-of-type {
color: white;
}
label span:first-of-type {
position: relative;
left: -27px;
font-size: 15px;
color: black;
}
label span {
position: relative;
top: -12px;
}
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label><input type="radio" id="h" name="priority" value="High priority"/><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority"/><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority"/><span>L</span></label>
<div id="text"> </div>
When I implement in my code, it's looks like below:

Created a fiddle for you - https://jsfiddle.net/fuzp6mL9/2/
Edited some of your CSS plus added a wrapper for the radio buttons. Feel free to change the color to w/e you need.
NOTE:
You'll need to put a wrapper around "#test" and "#text" to clear the floats. See https://css-tricks.com/snippets/css/clear-fix/
<div id="test">
<label><input type="radio" id="h" name="priority" value="High priority" /><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority" /><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority" /><span>L</span></label>
</div>
<div id="text"> </div>
$(function(){
$('input:radio[name=priority]').change(function()
{
var id = $(this).attr("id");
$("#text").html($(this).val());
$('label[for='+id+']').checked = true;
});
});
input[type="radio"] {
width: 30px;
height: 30px;
border-radius: 15px;
margin: 2px 0 0 2px;
background-color: #F1F1F1;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="radio"]:focus {
outline: none;
}
#h:checked {
background-color: red;
}
#m:checked {
background-color: orange;
}
#l:checked {
background-color: lightgreen;
}
input[type="radio"]:checked ~ span:first-of-type {
color: white;
}
label {
width: 35px;
display: inline-block;
position: relative;
}
label span {
position: absolute;
top: 10px;
left: 11px;
font-size: 15px;
color: black;
}
#text,
#test {
float: left;
}
#text {
margin-top: 14px;
margin-left: 10px;
}
#test {
padding: 6px;
background-color: blue;
border-radius: 26px;
}
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="test">
<label><input type="radio" id="h" name="priority" value="High priority" /><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority" /><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority" /><span>L</span></label>
</div>
<div id="text"> </div>
</body>
</html>

Is there a way to change the radio button to an image? [duplicate]

If I have a radio group with buttons:
... how can I show only images in the select option instead of the buttons, e.g.

Wrap radio and image in <label>
Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector +
Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label
/* HIDE RADIO */
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid #f00;
}
<label>
<input type="radio" name="test" value="small" checked>
<img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>
Don't forget to add a class to your labels and in CSS use that class instead.
Custom styles and animations
Here's an advanced version using the <i> element and the ::after pseudo-element:
body{color:#444;font:100%/1.4 sans-serif;}
/* CUSTOM RADIO & CHECKBOXES
http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{
display: inline-block;
vertical-align: middle;
height: 16px;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid gray;
background: gray;
}
.rad > i {
width: 16px;
border-radius: 50%;
}
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: gray;
}
.rad > input:focus + i { /* FOCUS <i> STYLE */
outline: 1px solid blue;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: orange;
}
/* CHECKBOX */
.ckb > input + i::after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: gray;
}
.ckb > input:focus + i {
outline: 1px solid blue;
}
.ckb > input:checked + i::after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: orange;
}
<label class="rad">
<input type="radio" name="rad1" value="a">
<i></i> Radio 1
</label>
<label class="rad">
<input type="radio" name="rad1" value="b" checked>
<i></i> Radio 2
</label>
<br>
<label class="ckb">
<input type="checkbox" name="ckb1" value="a" checked>
<i aria-hidden="true"></i> Checkbox 1
</label>
<label class="ckb">
<input type="checkbox" name="ckb2" value="b">
<i aria-hidden="true"></i> Checkbox 2
</label>

Example:
Heads up! This solution is CSS-only.
I recommend you take advantage of CSS3 to do that, by hidding the by-default input radio button with CSS3 rules:
.options input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
I just make an example a few days ago.
JSFiddle
How to use images for radio-buttons - Gist

You can use CSS for that.
HTML (only for demo, it is customizable)
<div class="button">
<input type="radio" name="a" value="a" id="a" />
<label for="a">a</label>
</div>
<div class="button">
<input type="radio" name="a" value="b" id="b" />
<label for="b">b</label>
</div>
<div class="button">
<input type="radio" name="a" value="c" id="c" />
<label for="c">c</label>
</div>
...
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
border: 1px solid red;
}
jsFiddle

Keep radio buttons hidden, and on clicking of images, select them using JavaScript and style your image so that it look like selected. Here is the markup -
<div id="radio-button-wrapper">
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
</div>
and JS
$(".image-radio img").click(function(){
$(this).prev().attr('checked',true);
})
CSS
span.image-radio input[type="radio"]:checked + img{
border:1px solid red;
}

Just using a class to only hide some...based on https://stackoverflow.com/a/17541916/1815624
/* HIDE RADIO */
.hiddenradio [type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
<div class="">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

Here is a simple jQuery UI solution based on the example here:
http://jqueryui.com/button/#radio
Modified code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
<input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
</div>
</form>
</body>
</html>
jQueryUI takes care of the image background so you know which button is checked.
Beware: If you want to set a button to checked or unchecked via Javascript, you must call the refresh function:
$('#radio3').prop('checked', true).button("refresh");

Images can be placed in place of radio buttons by using label and span elements.
<div class="customize-radio">
<label>Favourite Smiley</label><br>
<label for="hahaha">
<input type="radio" name="smiley" id="hahaha">
<span class="haha-img"></span>
HAHAHA
</label>
<label for="kiss">
<input type="radio" name="smiley" id="kiss">
<span class="kiss-img"></span>
Kiss
</label>
<label for="tongueOut">
<input type="radio" name="smiley" id="tongueOut">
<span class="tongueout-img"></span>
TongueOut
</label>
</div>
Radio button should be hidden,
.customize-radio label > input[type = 'radio'] {
visibility: hidden;
position: absolute;
}
Image can be given in the span tag,
.customize-radio label > input[type = 'radio'] ~ span{
cursor: pointer;
width: 27px;
height: 24px;
display: inline-block;
background-size: 27px 24px;
background-repeat: no-repeat;
}
.haha-img {
background-image: url('hahabefore.png');
}
.kiss-img{
background-image: url('kissbefore.png');
}
.tongueout-img{
background-image: url('tongueoutbefore.png');
}
To change the image on click of radio button, add checked state to the input tag,
.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
background-image: url('tongueout.png');
}
If you have any queries, Refer to the following link, As I have taken solution from the below blog,
http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Here is very simple example
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
background-size: 100px 100px;
height: 100px;
width: 100px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
input[type="radio"]:checked + label
{
background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}
<div>
<input type="radio" id="shipadd1" value=1 name="address" />
<label for="shipadd1"></label>
value 1
</div>
<div>
<input type="radio" id="shipadd2" value=2 name="address" />
<label for="shipadd2"></label>
value 2
</div>
Demo: http://jsfiddle.net/La8wQ/2471/
This example based on this trick: https://css-tricks.com/the-checkbox-hack/
I tested it on: chrome, firefox, safari

$spinTime: 3;
html, body { height: 100%; }
* { user-select: none; }
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Raleway', sans-serif;
font-size: 72px;
input {
display: none;
+ div > span {
display: inline-block;
position: relative;
white-space: nowrap;
color: rgba(#fff, 0);
transition: all 0.5s ease-in-out;
span {
display: inline-block;
position: absolute;
left: 50%;
text-align: center;
color: rgba(#000, 1);
transform: translateX(-50%);
transform-origin: left;
transition: all 0.5s ease-in-out;
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
}
&#fat:checked ~ div > span span {
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
&#fit:checked ~ div > span {
margin: 0 -10px;
span {
&:first-of-type {
transform: rotateY(90deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg,0deg);
}
}
}
+ div + div {
width: 280px;
margin-top: 10px;
label {
display: block;
padding: 20px 10px;
text-align: center;
transition: all 0.15s ease-in-out;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
width: 48%;
font-size: 64px;
cursor: pointer;
&:first-child {
float: left;
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child { float: right; }
}
}
&#fat:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
}
&#fit:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
&:last-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
}
}
}
<input type="radio" id="fat" name="fatfit">
<input type="radio" id="fit" name="fatfit">
<div>
GET F<span>A<span>A</span><span>I</span></span>T
</div>
<div>
<label for="fat">🍕</label>
<label for="fit">💪🏼</label>
</div>

This works for me:
input[type="radio"] {
margin-right: 1em;
appearance: none;
width: 12px;
height: 12px;
background-image: url("checkbox_off.gif");
}
input[type="radio"]:checked {
background-image: url("checkbox_on.gif");
}

Displaying text message below radio button once it is checked

I have two radio buttons side by side.After the first radio button is checked I have to display the text below it. I'm using this code but the text comes vertically.I want to display it horizontally.
input[type=radio]:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%
}
input[type=radio]:checked:after {
content: 'Are u sure you want to select all';
display: contents;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%;
}
<form>
<label>
<input type="radio" name="radio"/>
Radio1
</label>
<label>
<input type="radio" name="radio"/>
Radio2
</label>
</form>

position:absolute will make it exceed the limitation of it's container (the label). Also why did you limit the elem to width:15px?
input[type=radio]:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%
}
input[type=radio]:checked:after {
content: 'Are u sure you want to select all';
background: transparent;
border: 2px solid #004ecb;
position: absolute;
}
<form>
<label>
<input type="radio" name="radio"/>
Radio1
</label>
<label>
<input type="radio" name="radio"/>
Radio2
</label>
</form>

Increase the width of ::after element
input[type=radio]:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%
}
input[type=radio]:checked:after {
content: 'Are u sure you want to select all';
display: inline-block;
height: 15px;
width:200px;
background: transparent;
border-radius: 50%;
}
<form>
<label>
<input type="radio" name="radio"/>
Radio1
</label>
<label>
<input type="radio" name="radio"/>
Radio2
</label>
</form>

"Toggle" Event and "Mouseup" methods are not working here together

I am simply using HTML, CSS and Javascript where I am using the "toggle" method to open and close the dropdown. Also, I am using "mouseup" method to close the dropdown when someone clicks outside of it.
But the "toggle" method is not working along with the "mouseup" method. And I also need "mouseup" method to close the dropdown when user clicks outside of it. So, please tell me the solution to it, why "toggle" is not working with "mouseup" method. Thanks in Advance.
Here is the code:
var selectLabel = document.getElementById('selectLabel');
selectLabel.addEventListener('click', () => {
let dropdownDiv = selectLabel.parentElement.querySelector('.selection-dropdown');
selectLabel.classList.toggle('active');
dropdownDiv.classList.toggle('show');
});
document.addEventListener('mouseup', (e) => {
e.stopPropagation();
let dropdownDiv = document.querySelector('.selection-dropdown');
if (dropdownDiv.classList.contains('show')) {
if (!e.target.classList.contains('selection-dropdown') && !e.target.parentNode.closest('.selection-dropdown')) {
selectLabel.classList.remove('active');
document.querySelector('.selection-dropdown').classList.remove('show');
}
}
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
}
.selection-box {
width: 500px;
position: relative;
}
.selection-box .select-upper-label {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
color: #202020;
display: block;
width: 100%;
font-size: 1rem;
position: relative;
white-space: nowrap;
cursor: pointer;
}
.selection-box .select-upper-label::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 3px solid #808080;
border-top: 0;
border-right: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
right: 15px;
pointer-events: none;
transition: all 0.2s linear;
}
.selection-box .select-upper-label.active::after {
transform: translateY(-50%) rotate(135deg);
}
.selection-dropdown {
padding: 1.5rem 1rem;
box-shadow: 0 8px 45px rgba(0, 0, 0, 0.15);
position: absolute;
width: 100%;
top: 100%;
display: none;
border-radius: 5px;
}
.selection-dropdown.show {
display: block;
}
.selection-dropdown .select-all-link {
text-decoration: none;
color: #555;
display: block;
margin-bottom: 0.5rem;
color: royalblue;
}
.selection-dropdown .selection-dropdown-list label {
display: block;
padding: 0.5rem 1rem;
}
<div class="selection-box">
<label class="select-upper-label" id="selectLabel">Select options</label>
<div class="selection-dropdown">
<i class="ion-checkmark-round"></i> Select All
<div class="selection-dropdown-list">
<label class="label" for="option1"><input type="checkbox" id="option1"> Option 1</label>
<label class="label" for="option2"><input type="checkbox" id="option2"> Option 2</label>
<label class="label" for="option3"><input type="checkbox" id="option3"> Option 3</label>
<label class="label" for="option4"><input type="checkbox" id="option4"> Option 4</label>
<label class="label" for="option5"><input type="checkbox" id="option5"> Option 5</label>
</div>
</div>
</div>

Create multiple checkboxes using the same CSS style

I want to use a CSS styleheet for 3 different checkboxes on the same HTML page.I'm unsure how to declare the location of the checkboxes to make them all in line with the text. Here is my CSS stylesheet for the checkbox:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxOne {
background: none repeat scroll 0 0 #484848;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
height: 40px;
margin: -30px 200px;
position: relative;
width: 40px;
}
.checkboxOne input[type="checkbox"]:checked + label {
background: none repeat scroll 0 0 #6E0000;
}
.checkboxOne label:before {
content:'N';
padding:6px;
color:#000000;
display: block;
padding: 4px;
text-align: center;
}
.checkboxOne input[type="checkbox"]:checked + label:before {
content:'Y';
padding:6px;
color:#FFFFFF;
display:block;
padding: 4px;
text-align: center;
}
.checkboxOne label {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 5px;
transition: all 0.5s ease 0s;
width: 30px;
z-index: 1;
}
I know that margin is the location of the checkbox hard coded. I am hoping there is a way to make the checkboxes location inline right after the text in the html document, like this:
Did you eat breakfast? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput"></label>
</div><br>
Did you eat lunch? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2"></label>
</div><br>
Did you eat dinner? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3"></label>
</div><br>

Let's do a proper form! Sorted out what you want now.
Correct answer Look at the fiddle - http://jsfiddle.net/Wa5s8/2/
HTML
<form>
<fieldset>
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput">Did you eat breakfast?</label>
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2">Did you eat lunch?</label>
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3">Did you eat dinner?</label>
</fieldset>
</form>
A pinch of CSS:
input[type=checkbox] {
display:none;
}
label {
float: left;
clear: left;
width: 200px;
}
input[type=checkbox] + label:after
{
content: 'N';
background: #F00;
float: right;
}
input[type=checkbox]:checked + label:after
{
content: 'Y';
background: #FF0;
}

Possibly you could try:
HTML
<div class="row">
<input type="radio" /> <span>Radio title </span>
</div>
CSS:
.row{ display:block;}
.row span{margin:0 0 0 10px;}

Develop Reference

JavaScript is the programming language of the Web.

Radio Input Check/Uncheck when clicked on label - javascript

Related

Priority Indication Button

Is there a way to change the radio button to an image? [duplicate]

Displaying text message below radio button once it is checked

"Toggle" Event and "Mouseup" methods are not working here together

Create multiple checkboxes using the same CSS style

Categories

Resources