So I have 5 radio buttons and 5 images. I want, when clicked, each button to show a specific image. However, when I check the radio button with something else, it adds another image instead of replacing it!
Here's the code
https://jsfiddle.net/fcd8s9c8/5/
Here's my JS code
$("#ekoloshki").change(function() {
if (this.checked) {
$("#ekoloshkislika").removeClass("skrijgo");
}
else {
$("#ekoloshkislika").addClass("skrijgo");
}
});
You need to use the id from the currently checked radio button and concatenate it with the word slika.
$('img').addClass('skrijgo');
$('img#' + $(this).attr('id') + 'slika').removeClass('skrijgo');
I've added images to illustrate
$(document).ready(function() {
$('[name="karta"]').change(function() {
$('img').addClass('skrijgo');
$('img#' + $(this).attr('id') + 'slika').removeClass('skrijgo');
});
});
#listata {
display: block;
margin-right: 25%;
margin-left: 25%;
margin-top: 0%;
background-color: white;
}
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#checkboxes {
display: block;
width: 100%;
background-color: white;
border-style: solid;
border-color: black;
height: 5%;
}
.skrijgo {
display: none;
}
#kartata {
margin-top: 2%;
position: relative;
float: center;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="listata">
<div id="checkboxes" class="unselectable">
<label><input type="Radio" id="ekoloshki" name="karta">Еколошки фактори</label>
<p>
<label><input type="Radio" id="socio" name="karta">Социо-економски фактори</label>
<p>
<label><input type="Radio" id="prirodni" name="karta">Природно-географски фактори</label>
<p>
<label><input type="Radio" id="infra" name="karta">Инфраструктурни фактори</label>
<p>
<label><input type="Radio" id="site" name="karta">Сите фактори</label>
</div>
</section>
<!-- Kartite -->
<section>
<div id="kartata">
<img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" id="ekoloshkislika" class="skrijgo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhILUOq_dTGoC4-EqYrk25I3G3RuQkz09hgqABMs9AOg2h-dumkA" id="socioslika" class="skrijgo">
<img src="http://lmsotfy.com/so.png" id="prirodnislika" class="skrijgo">
<img src="https://cdn-images-1.medium.com/max/785/1*H-25KB7EbSHjv70HXrdl6w.png" id="infraslika" class="skrijgo">
<img src="http://www.stickpng.com/assets/images/586aaf811fdce414493f5105.png" id="siteslika" class="skrijgo">
</div>
</section>
Sounds like you want to add the skrijgo class to all the other images that you don't want to show.
I'd go with a more generic solution. For example
$('input[name="kartka"][id]').on('change', function() {
let checkId = `${this.id}slika`
$('#kartata img').each((i, elt) => {
elt.classList.toggle('skrijgo', elt.id !== checkId)
})
})
That is, whenever an input named "kartka" (with an id attribute) changes, iterate over all the <img> elements inside #kartata and if their id attribute matches the radio button's id + 'slika' , then remove the class. If not, then add the class.
Related
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>
I want to create custom and accessible Radio- and Checkbox-Buttons and found the nice solution of W3C, using divs and aria role="radio".
https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-1/radio-1.html
<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="false" tabindex="0">
Button
</div>
</div>
It looks and works great for me, but I want to implement Radio-Buttons as required fields of the form. Problem: in this solution is no input-element and for this reason no required-attribute possible..
The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of "true" or "false". For example, if a user must fill in an field, then aria-required is set to "true".
<div role="radiogroup" aria-labelledby="group_label_1" aria-required="true" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="false" tabindex="0">
Button
</div>
</div>
you only make it require with add a property
aria-checked = true
into first any radio.
ex:
<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="true" tabindex="0">
Button
</div>
<h3 id="group_label_2">Label2</h3>
<div role="radio" aria-checked="false" tabindex="1">
Button2
</div>
</div>
Check W3school custom radio button for creating custom radio buttons. and you can put required attribute to radio buttons check the following code for the demo.
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<form method="post" action="https://facebook.com" target="_blank">
<label class="container">One
<input type="radio" required="" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio" required="">
<span class="checkmark"></span>
</label>
<input type="submit" value="asd" />
</form>
</body>
</html>
You can simply add the required tag to your input elements.
Here's a working CodePen: https://codepen.io/anon/pen/zWzaKM
In my example, if you click on one of the alt images, I am looking to get the checkmark image to appear. Right now my on change event is registering (see console), but the image .checkmark-img is not being found or faded in. The fadeBoolToggle function is to fadeIn out if active.
This code is meant to be allow only one checkbox checked at once. So when someone clicks on an input, it unchecks all inputs and then checks the one clicked.
$('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
this.checked = true;
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
Does anyone see why my image is not fading in when one of the alt images are clicked?
Jsfiddle
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.option-check').on('change', function() {
$('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
this.checked = true;
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
var test = $('.option-check:checked').val();
console.log('option check clicked');
console.log(test);
});
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 2;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
}
.product-check,
.calendar-check,
.option-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
</div>
<input type="checkbox" class="option-check" id='flag-option' value='A'>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
</div>
<input type="checkbox" class="option-check" id='nickel-option' value='B'>
.closest() returns the closest of the current item's parents, including current object itself, which matches the selector.
Because you placed your <input>s outside .product-wrap divs...
$(this).closest('.product-wrap')
... returns empty.
Working example:
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.option-check').on('change', function() {
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
var test = $('.option-check:checked').val();
console.log('option check clicked');
console.log(test);
});
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 2;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
}
.product-check,
.calendar-check,
.option-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="radio" class="option-check" id='flag-option' name='check-option' value='A'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="radio" class="option-check" id="nickel-option" name='check-option' value='B'>
</div>
When facing such issues in the future, consider using console.log methodically. I started with
console.log($(this).closest('.product-wrap').is('.product-wrap'))
If this would have returned true, I'd have moved on to
console.log($(this).closest('.product-wrap').find('.checkmark-img').is('.checkmark-img'))
... and so on.
Note: Even though it reproduced the issue, your snippet looked like it was broken and it stopped everyone, including me, from taking a closer look. Whether you take something out of that, it's totally up to you.
I am creating a custom form but have hit a snag: The Radio buttons; when you click on them in the unchecked status the do not check. They will check if click the associated Div and the will also uncheck when checked. I have tried to extend the JS to the Label and It still does not work. And so...
How do I get a custom radio button to check and/or what do i need to do to get this to function?
Here is the relevant Code:
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
.title {
display: inline;
position: relative;
top: 2px;
font-family: "Arial";
color: #fff;
font-size: 18px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-collapse: collapse;
font-stretch: ultra-condensed;
}
input[type="radio"] {
display: none;
}
[type="radio"] + label {
width: 10px;
height: 10px;
}
[type="radio"] + label {
background-color: #A3D5FF;
border: 1px solid #A3D5FF;
padding: 9px;
border-radius: 20px;
display: inline-block;
position: relative;
margin-right: 30px;
}
[type="radio"]:checked + label {
background-color: #0088A8;
;
border: 3px solid #fff;
height: 5.75px;
width: 5.75px;
color: #243441;
}
input[type="radio"] + label {
cursor: pointer;
font-size: 1em;
float: right;
position: relative;
right: -27px;
}
.chk {
background: #009FC2;
width: 265px;
height: 30px;
margin: 5px;
padding: 5px;
border-radius: 5px;
}
.chk:hover {
background: #0088A8;
}
HTML
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>
</div>
Additional note: I am running almost identical code for my checkboxes and they are working perfectly.
The problem is in your check function. When you click on the div it fires to reverse the check state. When you click the check itself, the check state is reversed, then the check function runs and reverses the state again. You need to cancel event propagation when the check itself is clicked.
noted, previous answer was in jquery, please see below for vanilla
javascript :
function checkboxClicked() {
event.stopPropagation();
event.preventDefault();
}
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
html :
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input onclick="checkboxClicked()" id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input onclick="checkboxClicked()" id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input onclick="checkboxClicked()" id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>
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;
}