want to remove radio button class false if parent div class s1 found.
<div class="s1">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
my script
$('.s1:has(input:radio:checked)').removeClass('false');
You can simple selector, nothing special is required.
$('.s1 :radio').removeClass('false');
jQuery(function($) {
$('.s1 :radio').removeClass('false');
});
.false {
background-color: blue;
height: 50px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s1">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
<div class="s2">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
try this for just radio whether checked or not
$(".s1 input[type='radio']").removeClass('false');
And this one for only checked radio
$(".s1 input[type='radio']:checked").removeClass('false');
If the only reason is to alter the way the radio buttons looks, using jQuery is not really the normal way.
Here is an example without using jQuery, it's just been targeted in CSS instead.
.s2 .false {
height: 50px;
width: 100px;
}
<div class="s1">
<input name="question0"
checked type="radio"
value="C"
class="false">
</div>
<div class="s2">
<input name="question0"
checked
type="radio"
value="C"
class="false">
</div>
Related
I tried to make the input field onclick of a radio button work and it seems like not working.
My fiddle: https://jsfiddle.net/6qoe89j2/8/
$("#ddlMth").hide();
$("input[type='radio']").change(function() {
if ($(this).val() == "delivery-yes") {
$("#ddlMth").show();
} else {
$("#ddlMth").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radioFrequency" onclick="myMth()" id="radioFrequency-0" value="delivery-yes" /> Yes.
<input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.
<div class="controls">
<label id="ddlMth" name="ddlMth" class="car-list-step-label" for="country">Test</label>
<input id="ddlMth" name="ddlMth" type="text" placeholder="e.g £50" class="form-control car-list-input">
</div>
You cannot have same Id for multiple elements. I have changed the Id of label and Input.
You don't need jQuery, you can do it with CSS.
See below Snippet :
.controls{
display:none;
}
input[value="delivery-yes"]:checked ~ .controls {
display: block;
}
<input type="radio" name="radioFrequency" id="radioFrequency-0" value="delivery-yes" /> Yes.
<input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.
<div class="controls">
<label id="ddlMthLabel" for="ddlMth" class="ddlMth car-list-step-label">Test</label>
<input id="ddlMthInput" name="ddlMth" type="text" placeholder="e.g £50" class="ddlMth form-control car-list-input">
</div>
You set 2 elements with the same id="ddlMth". id must be unique. Jquery selects only the first one then hide it. If you want to hide the label and the input, you should hide the container of them:
$("#ddlMth").hide();
$("input[type='radio']").change(function() {
if ($(this).val() == "delivery-yes") {
$("#ddlMth").show();
} else {
$("#ddlMth").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="radioFrequency" id="radioFrequency-0" value="delivery-yes" /> Yes.</label>
<label><input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.</label>
<div class="controls" id="ddlMth">
<label name="ddlMth" class="car-list-step-label" for="country">Test</label>
<input name="ddlMth" type="text" placeholder="e.g £50" class="form-control car-list-input">
</div>
I would like to combine two filters when clicking two different sections of buttons. Right now, when I click one button it removes the selection of the previous one. I have tried several functions but I have not been able to come with the right logic.
I have written a schema of my current status.
HTML
<!-- Buttons -->
<p> Language: <button class="btn" data-category="en"> EN </button> <button class="btn" data-category="it"> IT </button> </p>
<p> Stuff: <button class="btn" data-category="a"> A </button> <button class="btn" data-category="b"> B </button> <button class="btn" data-category="c"> C </button> </p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
js / jQuery
$(".btn").click(function(e){
e.preventDefault();
var category = $(this).data("category")
$('.element').hide();
$('.element.'+category).fadeIn();
})
It's also in this fiddle.
Also, nice to haves:
I would like to know how to color the button once it is selected.
Add a reset button (which I guess would be easy adding "reset" in data-category.
Thanks for the advice and the suggestions in advance!
One method is to use radio buttons. They allow one selection per group.
One downside is that you can't uncheck a radio button unless its by selecting another one in the same group, so I've added a "reset" button to each group.
Upon selection, I'm building a selector string of classes based on the checked buttons.
$(".mycb input").on('change', function(e) {
// select all the checked buttons.
var $checked = $('.mycb :checked');
// build an array of all the checked values.
var checked_classes = $checked.map(function() {
return this.value;
}).toArray();
// add the baseline "element" class to the array.
checked_classes.unshift('.element');
// build the class selector string.
var classes=checked_classes.join('.');
// debug the class selector string.
// console.log(classes);
// hide all elements.
$('.element').hide();
// show the elements that match the class selector string.
$(classes).fadeIn();
});
$('.reset').on('click', function() {
var $container = $(this).closest('p');
$('input', $container).prop('checked', false).last().trigger('change');
});
btn-selected {
color: red;
}
.mycb input {
display: none;
}
.mycb span {
background-color: white;
border: 1px solid #CCC;
border-radius: .3em;
padding: 0 .3em;
cursor:pointer;
user-select: none;
}
.mycb input:checked+span {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button -->
<p>Language:
<label class="mycb">
<input type="radio" name="lang" value="en">
<span>EN</span>
</label>
<label class="mycb">
<input type="radio" name="lang" value="it">
<span>IT</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<p>Stuff:
<label class="mycb">
<input type="radio" name="stuff" value="a">
<span>A</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="b">
<span>B</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="c">
<span>C</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
I have forked your js fiddle to provide a solution using your CSS class
https://jsfiddle.net/sguex20k/
JavaScript
$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class
/* other code */
$(this).addClass('btn-selected'); // adding class to clicked button
And the problem in your CSS you were missing the . in your selector
.btn-selected { }
i am having a problem with my code. i am trying to make that when a radio input is selected, the product image changes (the radio inputs are the different colors) but i cant get it to work, i am giving the image 1 (the hoodie) an active class and the second image a imgsec class, as you see the active class has an opacity of 100% and the imgsec has no display, using javascript i check the values of the radio inputs and change switch the classes accordingly, thanks for the help!
if (document.getElementById('black').checked) {
color_value = document.getElementById('black').value;
document.getElementById("black").classList.add('active');
document.getElementById("white").classList.remove('active');
document.getElementById("white").classList.add('imgsec');
document.getElementById("black").classList.remove('imgsec');
}
if (document.getElementById('white').checked) {
color_value = document.getElementById('white').value;
document.getElementById("black").classList.add('imgsec');
document.getElementById("white").classList.remove('imgsec');
document.getElementById("white").classList.add('active');
document.getElementById("black").classList.remove('active');
}
.left-column img.active {
opacity: 1;
}
.left-colum img.imgsec {
display: none
}
<div class="color-choose">
<div>
<!--<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label> -->
</div>
<div>
<input data-image="white" type="radio" id="white" name="color" value="white" class="white">
<label for="white"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black" class="black">
<label for="black"><span></span></label>
</div>
</div>
You are changing the classes of to the checkbox elements, not to the image elements!
this css refers to img
.left-column img.active
but this refers to the checkbox
document.getElementById("white").classList.add('active');
$(document).ready(function() {
$("#black,#white").click(function() {
if (document.getElementById('black').checked) {
color_value = document.getElementById('black').value;
document.getElementById("black-img").classList.add('active');
document.getElementById("white-img").classList.remove('active');
document.getElementById("white-img").classList.add('imgsec');
document.getElementById("black-img").classList.remove('imgsec');
}
if (document.getElementById('white').checked) {
color_value = document.getElementById('white').value;
document.getElementById("black-img").classList.add('imgsec');
document.getElementById("white-img").classList.remove('imgsec');
document.getElementById("white-img").classList.add('active');
document.getElementById("black-img").classList.remove('active');
}
});
});
.left-column img.active {
opacity: 1;
}
.left-column img.imgsec {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-choose">
<div>
<!--<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label> -->
</div>
<div>
<input data-image="white" type="radio" id="white" name="color" value="white" class="white">
<label for="white"><span>WHITE</span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black" class="black">
<label for="black"><span>BLACK</span></label>
</div>
</div>
<div class="left-column">
<img id='white-img' class='imgsec' src='data:image/webp;base64,UklGRoAEAABXRUJQVlA4IHQEAACQHQCdASqfAJ8APj0cjESiIaESaRTkIAPEtLdwuJh9PtLvv/XZMyDbt6iSMQ+jwy5TyPhKHNA/LhQ1A2v5J66ba+OjTinXTom4HqxzMOuVmSF9uYadI97XN7GxY5zjaMlFhnzEkef0abnIGz/7gK9rAk/knICTdED+Yn3rx5QuhxMfwxQa/e1f/341a9wQ++Bf9/6ia6LFjS2GiN538e+mT0sH4eIOPe522Ersp9tWBAY5PfwWzGnLb0a/8cB9x+Q7mfOBmWnL3/+UAt/17uTuoawmNyyyffxN86swnl5rLN1EJxnunamNcpHs63ve1J66bbJ1cAD+/5D4AAFuDd8IYRAnlAKP4w2PO/RoiESk25zzjaXI/NwqJSEi+kLC0v8F5awtJTWitsom4GHRWq6jq2T3Yver30Q/RqdDl2qOEFYrSFKTp49wxMO3YatIEX06E7QnrwAVpek7b1YmASpIDh3USayEgdWyhvHUNhfrqa1jqd4cS0+BPyHOUBYmTyrHwDM8pjcwLqLhpALG9Z0FxO7falZf6Y+N7Y6usk9ZnsIBXZxH2+/ZGb7BcyYoXIZAgXV64zVN+cZxoOT1eNAOjcd3VuT/fLCMNf2Vmyw7dRMvwtDI+RIjzUw1zH9/0EvKMKpIvRMJIonn2XcwsV3lyHvvGKx5tX6oVpSHknLyqY9C/+J+Dsd43Lf+MOHtWyD2OFQ0ggwj0w+gk7jLlVmwyMVhzxE92vYLLUhhVsuOkcE+2zQYF+6wErRpgHQ3N6E1M2oH+8hZOWrLEvkQBWiI8EePSdF2ccz4Q+IZLjGo1CziC1oRTiLlbo3eHxYcdE341A2w2whAYoRyBNfzXx2SkHe8NxA35vSnwO93Jluh/8Z1Uof+zRE5Ibm3lPfJONOHxg9eE8buRYgdJ/z7363DHECYMIcTj+8AeyFpbVlR6en1psgalJUnIb++OPtqLDFFpOpkdGGycOYDMPL+woBKj/PXsS6M6s4sIDHSjX2s1RCG1nLKPlpemSe1SSGw9p/jmuZe8p2fqle4atZXMhasbpK+jrZ2oGq+6RIIYg1EVAXrwUyeuBWj2AXbHXxIshlubSMKsS3uWJLd4MWgywnBsXy6wqwAbRw8GTlKCUgnQhZGP2ImuOty8nAlYeKIpDwHAKpTMF5EwJxJxhOcEnupxyIVp3I5/Cjb9zfKxFByLYMuDUELyztWoPHbWuC4E2Gx7kt1n6+43KXNaUeR4wQ56Tg+Swb+o4dEWvLXfxE6sukx9fzRN/xrjhLA74NjX6/BBN3QHjwJn3CbPcAQKhJe4cDFYvJe1txQ4LbuZBxcbIcR5ofpHNLH42bl860id420olc1baQhOx9GOSgcxWr8J78b/BhRT98vYdfLG4kQZ9khJCI9mDRdQWh8H5We5dtmfGkOIkEUTI1oVVdSNZMYGvCZq/NAgKpsxER6ZrpIpe2lniQEfthnHmZLdL03kfCCMMl4FQdBiGF0Z87d5q9qJh7VKJA9tLJD5bND7BAAAAAAAAA=' />
<img id='black-img' class='imgsec' src='data:image/webp;base64,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' />
</div>
I got an image positioned in container and 3 radio buttons. I would like to add another images appear over the container main image when some of the radio buttons is chosen. Each of the buttons will have different positions of the images shown when they are active.
So far I got that:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" /> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" /> 3
</label>
</div>
</div>
</div>
<div class="col-md-8 col-fl">
<div id="img_box">
<img style="width: 100%;" src="img/other/rounded_corners.png" />
</div>
You could add the image sources as data attr. to the radio button.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
</label>
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>
The img box is empty but size and image are set by css:
#img_box{
width: 350px;
height: 150px;
background: url('http://placehold.it/350x150/ff0000')
}
Then add a event that append a img overlay on click (using source from radio buttons):
$(function(){
$('input[type=radio]').click(function(){
$this = $(this)
$img_box = $('#img_box')
$overlay = $('<img/>').attr('src',$this.data('img'))
$img_box.html('').append($overlay)
});
})
See this example: https://jsfiddle.net/fmytsjv7/1/
You can achieve that using jQuery, and binding event handler to your radio buttons.
Like this one:
$('input:radio[name="quality[25]"]').change(function(){ });
Then add the handler to alter the attributes/css properties of the target image container or the image element directly.
You can use jQuery .css() to alter css properties of your target element
Like:
$("#img_box").css({"height":"100px","width":"100px",background:"red"});
While, you can use jQuery .attr() to alter the attributes of your target element.
Like: (in this case its the img's "src" attribute)
$("#img_box > img").attr("src","path/to/whatever/image");
HERE'S A SAMPLE IN JSFIDDLE
I see that you included jQuery tag in your question, so I assume you are interested in jQuery based solution.
Let's assume i have code like below;
<div>
<span>SELECT1</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
<span>SELECT2</span>
<div>
<input type="checkbox" value="option3" name="option3">
<span>option3</span>
</div>
<div>
<input type="checkbox" value="option4" name="option4">
<span>option4</span>
</div>
</div>
Is there a way to highlight related "SELECT1" or "SELECT2" if at least one of involved option has checked ? In my situation , it is ok to do so for labels options1,2 and option3,4 however, how for SELECT1 and SELECT2 using css or jquery/js ?
Thanks in advance,
You can do it quite easily:
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]').is(':checked')){
$('.title').css('color','red');
}
else{
$('.title').css('color','black');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="title">SELECT</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
</div>