Fake radio button 1 option only - javascript

I am trying to simulate the behavior of a radio button but using, instead of and input tag, an span, in order to be easier to style with css. I can simulate the change of state, but I cannot figure out how to only let one button to be selected.
Here is my js for the 'change of state':
function CheckRadioButton() {
$(".radio-button").click(function () {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
}
});
}
What I'd like to do is, if one button changes its class to selected, all the rest have to be 'unselected'.
Another problem I encounter is that I have several "categories" in which I use this type of buttons and I only want the only option inside of each category. For example:
<p class="fake-label">Skirt</p>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Yes</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>No</span>
</div>
<p class="fake-label">Season</p>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Summer</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Winter</span>
</div>
How can I do to be able to 'choose' only one between yes/no and only one between 'summer/winter', but both at the same time?? (only two of this for spans can have class 'checked' at the same time)
Thank you :)

Try this
FIDDLE
Yo can add an additional div to group similar categories and update your jquery code like below.
HTML
<p class="fake-label">Skirt</p>
<div class="radio-group">
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Yes</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>No</span>
</div>
</div>
<p class="fake-label">Season</p>
<div class="radio-group">
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Summer</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Winter</span>
</div>
</div>
Javascript
$(".radio-button").click(function () {
$(this).closest('div.radio-group').find(".radio-button").removeClass('checked');
$(this).addClass('checked');
});

You can combine the power of real inputs with the freedom of using other tags:
.input-wrap {
position: relative;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
padding-left: 22px;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 10px;
height: 10px;
border: 2px solid black;
border-radius: 50%;
transform: translateY(-50%);
}
input[type="radio"]:checked + label:after {
content: "";
position: absolute;
left:3px;
top: 50%;
width: 8px;
height: 8px;
background-color: #bada55;
border-radius: 50%;
transform: translateY(-50%);
}
<div class="input-wrap">
<input type="radio" name="test" id="option1" checked><label for="option1">Option1</label>
</div>
<div class="input-wrap">
<input type="radio" name="test" id="option2"><label for="option2">Option1</label>
</div>
<div class="input-wrap">
<input type="radio" name="test" id="option3"><label for="option3">Option1</label>
</div>
It's kind like adding/removing classes like you did in your example, but instead we use the :checked + label selector to select the label of the currently checked input, that way we have the accessibility of real inputs (almost) and the freedom of writing our markup the way we want it to be.
And the best thing is this solution is css only and it can be used to hide/show entire sections of a page.
PS: I said "almost" the same accessibility because I think some screen readers will ignore inputs with display: none, to fix this you can still use:
position: absolute;
left: -99999px;
EDIT: Since it seams you really want to go down this fake-inputs, this should help:
$(".radio-button").click(function () {
$(".radio-button").removeClass('checked);
$(this).addClass('checked');
});

Related

how to create a custom Input radio button which have attributes inside it

I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked
what i have tried ?
I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.
.radio__input{
display:none;
}
.radiobox{
width:60px;
height:60px;
border:1px solid black;
}
//i want the div radiobox to styled when one radiobox is selected
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
XS
</div>
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
S
</div>
You need to keep the radio button somewhere, for the sake of accessibility, and to still be able to select it.
A common solution to styling radio buttons is to style their <label> element instead, and use the CSS Adjacent sibling combinator to style it depending on the radio button’s state.
Some more things should be taken into account to make the component accessible to users who need assistive technology:
you should also use <fieldset> to provide an accessible name to the option group, even though “Green” might be self-explanatory
focus needs to be visible, and since you are hiding the radio button itself, one solution is to show it on the fieldset
each radio button still needs an accessible name, so add some hidden text also inside the labels
.color-options {
display: flex;
padding: .2em;
gap: .4em;
}
.color-options:focus-within {
outline: .2em solid blue;
}
.color-option {
width: 2em;
height: 2em;
}
input:checked+.color-option {
outline: .2em solid darkseagreen;
}
/* kudos to Scott O'Hara
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<fieldset>
<legend>Color</legend>
<div class="color-options">
<input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
<label class="color-option" style="background-color: gray" for="color-gray">
<span class="visually-hidden">
Gray
</span>
</label>
<input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
<label class="color-option" style="background-color: black" for="color-black">
<span class="visually-hidden">
Black
</span>
</label>
<input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
<label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
<span class="visually-hidden">
Dark Green
</span>
</label>
</div>
</fieldset>
I used unique ids for every radio button, which is used by the <label> element's for attribute to associate the labels with the radio buttons. So now the input is also checked when the label is clicked. Then i just styled the initial and checked state. But remember that you can only style elements according to the checked state of an input when they are a sibling or children. You can't access the parent element like in this case the .radiobox container with pure css.
.radiobox {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
input[type="radio"] {
appearance: none;
}
input[type="radio"] + label {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:checked + label {
background: blue;
}
<div class="radiobox">
<input type="radio" id="s" name="radio"/>
<label for="s">S</label>
</div>
<div class="radiobox">
<input type="radio" id="m" name="radio"/>
<label for="m">M</label>
</div>

Replace two buttons with a toggle switch

I have the following code:
<img id="v1" src="pic1.jpg"><br>
<button onclick="document.getElementById('v1').src='pic1.jpg'">Before</button>
<button onclick="document.getElementById('v1').src='pic2.jpg'">After</button>
<br>
<img id="v2" src="pic3.jpg"><br>
<button onclick="document.getElementById('v2').src='pic3.jpg'">Before</button>
<button onclick="document.getElementById('v2').src='pic4.jpg'">After</button>
<br>
However, I would like to replace these 'Before' and 'After' buttons with a toggle switch (already made) in the form of a checkbox:
<label class="switchBA">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
In a way that each time it's clicked it switches between the two functions. I guess this needs to be done inline since these are just two of many comparisons.
Thanks in advance.
P.S: I would like to do with only with JS. No need for jQuery or other frameworks.
Here's a nice way to achieve this by listening for the toggle in javascript and setting the image to that of the custom data attribute set under the image tag.
var toggleClass = document.getElementsByClassName("toggle");
var toggleFunction = function() {
var imageElement = this.parentElement.parentElement.getElementsByClassName("imageItem")[0];
if(this.checked){
imageElement.src = imageElement.getAttribute("data-image-2");
}else{
imageElement.src = imageElement.getAttribute("data-image-1");
}
};
for (var i = 0; i < toggleClass.length; i++) {
toggleClass[i].addEventListener('click', toggleFunction, false);
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<h2>Toggle Image Demo</h2>
<div class="imageContainer">
<img class="imageItem" src="https://lorempixel.com/400/200/sports/5/Image1/" data-image-1="https://lorempixel.com/400/200/sports/5/Image1/" data-image-2="https://lorempixel.com/400/200/sports/6/Image2/">
<label class="switch">
<input class="toggle" type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="imageContainer">
<img class="imageItem" src="https://lorempixel.com/400/200/sports/5/Image1/" data-image-1="https://lorempixel.com/400/200/sports/5/Image1/" data-image-2="https://lorempixel.com/400/200/sports/6/Image2/">
<label class="switch">
<input class="toggle" type="checkbox">
<span class="slider"></span>
</label>
</div>
Taking this approach over CSS and Backgrounds or setting the second image URL in the javascript should help keep the code cleaner. Also by doing this, the code will be easier to scale to accommodate multiple images toggles on one page without changing the Javascript.
Try this.
function toggleImage(){
var el = document.getElementById("toggle")
if(el.checked){
document.getElementById("v1").src="https://picsee.co/images/social_facebook.png";
}
else{
document.getElementById("v1").src="https://picsee.co/images/social_twitter.png";
}
}
<img id="v1" src="https://picsee.co/images/social_facebook.png">
<label class="switchBA">
<input type="checkbox" id="toggle" checked onclick="toggleImage()">
<span class="slider"></span>
</label>
You can use onchange event to get the event on state change as below
function oncheckchange(e)
{
console.log(event.currentTarget.checked)
if(event.currentTarget.checked)
document.getElementById('v2').src='pic4.jpg'
else
document.getElementById('v2').src='pic3.jpg'
}
<img id="v1" src="pic1.jpg"><br>
<button onclick="document.getElementById('v1').src='pic1.jpg'">Before</button>
<button onclick="document.getElementById('v1').src='pic2.jpg'">After</button>
<br>
<img id="v2" src="pic3.jpg"><br>
<button onclick="document.getElementById('v2').src='pic3.jpg'">Before</button>
<button onclick="document.getElementById('v2').src='pic4.jpg'">After</button>
<br>
<label class="switchBA">
<input type="checkbox" checked onchange="oncheckchange()">
<span class="slider"></span>
</label>
The simplest way to do this is to set the image as the background image of an element and then toggle that CSS setting by toggling the class that defines it:
document.querySelector("input[type=checkbox]").addEventListener("click", function(){
document.querySelector(".slider").classList.toggle("otherImage");
});
div {
width:150px;
height:150px;
background-size:contain;
border:1px solid black;
}
/* This will be the default style used because the class is defined in the HTML */
.slider {
background-image:url("http://aws-cdn-01.shemazing.ie/wp-content/uploads/2015/09/disappointed-but-relieved-face.png");
}
/* This will be toggled on and off by the clicking of the checkbox. When it is
toggled on, it will override the previous background-image value. */
.otherImage {
background-image:url("https://au.res.keymedia.com/files/image/emoji.jpg");
}
<label class="switchBA">
<input type="checkbox" checked>
<div class="slider"></div>
</label>
First of all you should never execute code in a handler the way you do. It's doable but in terms of readibility and maintainability it sucks, the handlers should only be used to fire a function.
It's fairly simple to achieve what you want.
put the toggle code inside a div and put the image and the newly created div inside a container div.
The div holding the toggle should include "display:none" in the css from the beginning so it is not shown, once you click on the button, you just need to hide the image and show the toggle switch div by changing "display:none" to "display:block";
Something like
<div class="container">
<img id="image1"src="https://openclipart.org/download/216413/coniglio_rabbit_small.svg" alt="">
<div id="toggle">
<img id="image2"src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png" alt="">
</div>
<button onclick="Change()">Click me</button>
</div>
https://codepen.io/anon/pen/rYGMYx

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

Placing static text at the end of an input field using HTML

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "#gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.
For example the input field would look like..
I hope this makes sense.. If you have any questions feel free to ask.
This text should stay static as the user types, which is what seperates it from a input field.
Here's some code that I have:
<form id="loginForm">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
</div>
<br>
<div class="form-group">
<input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
</div>
<br>
<span class="visible-lg">
<button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<span class="hidden-lg">
<button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<br>
</fieldset>
</form>
My css:
.loginSpinner{
display: none !important;
}
#badLogin{
display: none;
}
#badRequest{
display: none;
}
#createAccountForm{
display: none;
}
.createSpinner{
display: none !important;
}
#forgotPassword{
display: none;
color: red;
}
#usernameField:before{
content:"#gmail.com";
background-color:yellow;
color:red;
font-weight:bold;
}
JSFiddle: http://jsfiddle.net/UMBRd/
Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.
HTML
<div class="input-container">
<input type="text"/>
</div>
CSS
.input-container {
position: relative;
float: left;
}
.input-container:after {
position: absolute;
right: 0;
top: 0;
content: '#gmail.com';
}
See this fiddle.
Note, the pure CSS way with pseudo-elements won't work as discussed in this post.
The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:
HTML
<div>
<span>#gmail.com</span>
<input type="text" />
</div>
CSS
div {
position: relative;
}
span {
display: inline-block;
width: 200px;
position: relative;
line-height:95px;
text-align:right;
}
input {
position: absolute;
left: 10px;
top: 35px;
background-color: transparent;
width:200px;
height: 20px;
}
http://jsfiddle.net/pemep/

Styling Checkbox

I am trying to insert an image instead of a check on the check box. The code that am using is:
<html>
<head>
<style>
.bl {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
width: 90%;
height:30px;
border-radius: 5px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:10px;
}
p
{
font-family:"Times New Roman";
font-size:10px;
}
checkbox
{
width: 75px;
height: 75px;
padding: 0 5px 0 0;
background: url(images/Green_tick.png) no-repeat;
display: block;
clear: left;
float: left;
}
.checked {
position: absolute;
width: 200px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(images/Green_tick.png) no-repeat;
overflow: hidden;
}
</style>
</head>
<body>
<script>
function Checked(id)
{
if(id.checked==1)
{
alert("Checked");
}
else
{
alert("You didn't check it! Let me check it for you.")
id.checked = 1;
}
}
</script>
<div class="main_menu">
<a id='menu' href="javascript:" onclick="loadMenuPage();"></a>
</div>
<p>
All verifications required for QR7 can be uploaded here. Any item which still requires verification is
marked in red until picture has been attached.
</p>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input>
</div>
</body>
</html>
Any suggestions on how do i achieve it. As of now i get a normal tick in the checkbox.
Thanks in advance.
This post is old but this is what i suggest:
Associate labels to your checkboxes like this:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes. I use backgrond-color in this example, but you could easily use your background image instead.
Here is the jsfiddle
Styling checkboxes using CSS is a nightmare and you'll never achieve the look you want. Try using a jQuery plugin, most of them 'hide' the checkbox by positioning the input off the visible screen and use a span replacement with a background image that you can edit to suit your needs.
Something like:
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Also check this thread:
Pure CSS Checkbox Image replacement

Categories