jQuery show hide divs on radio buttons - javascript

I have got a group of radio buttons that when clicked need to display a corresponding unordered list. I have got as far as showing the correct list according to which radio button is clicked but cannot figure out how to hide the other lists that need to be hidden. So if i click the second benefits radion then the second 'spend' ul will display and the other 'spend' uls will hide.
This is my jQuery:
// hide all except first ul
$('div.chevron ul').not(':first').hide();
//
$('div.chevron > ul > li > input[name=benefits]').live('click',function() {
// work out which radio has been clicked
var $radioClick = $(this).index('div.chevron > ul > li > input[name=benefits]');
var $radioClick = $radioClick + 1;
$('div.chevron > ul').eq($radioClick).show();
});
// trigger click event to show spend list
var $defaultRadio = $('div.chevron > ul > li > input:first[name=benefits]')
$defaultRadio.trigger('click');
And this is my HTML:
<div class="divider chevron">
<ul>
<li><strong>What benefit are you most interested in?</strong></li>
<li>
<input type="radio" class="inlineSpace" name="benefits" id="firstBenefit" value="Dental" checked="checked" />
<label for="firstBenefit">Dental</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="benefits" id="secondBenefit" value="Optical" />
<label for="secondBenefit">Optical</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="benefits" id="thirdBenefit" value="Physiotherapy" />
<label for="thirdBenefit">Physiotherapy, osteopathy, chiropractic, acupuncture</label>
</li>
</ul>
<ul>
<li><strong>How much do you spend a year on Dental?</strong></li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate1a" value="£50" />
<label for="rate1a">£50</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate2a" value="£100" />
<label for="rate2a">£100</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate3a" value="£150" />
<label for="rate3a">£150</label>
</li>
</ul>
<ul>
<li><strong>How much do you spend a year on Optical?</strong></li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate1b" value="£50" />
<label for="rate1a">£50</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate2b" value="£100" />
<label for="rate2a">£100</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate3b" value="£150" />
<label for="rate3a">£150</label>
</li>
</ul>
<ul>
<li><strong>How much do you spend a year on Physiotherapy, osteopathy, chiropractic, acupuncture?</strong></li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate1c" value="£50" />
<label for="rate1a">£50</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate2c" value="£100" />
<label for="rate2a">£100</label>
</li>
<li>
<input type="radio" class="inlineSpace" name="spend" id="rate3c" value="£150" />
<label for="rate3a">£150</label>
</li>
</ul>
<label class="button"><input type="submit" value="View your quote" class="submit" /></label>
</div>
I tried using:
$('div.chevron > ul').not($radioClick).hide();
But that yielded a bad result where all the lists where hidden.
Thanks in advance.

This will hide the currently visible one.. ( you should run it before showing the newly clicked ul )
$('div.chevron > ul:visible').hide();

thanks. I solved it with:
$('div.chevron > ul:visible').hide();
$('div.chevron > ul:first').show();
$('div.chevron > ul').eq($radioClick).show();
I don't know what it is but i always seem to over complicate stuff like this in my code when the answer is very easy.

Related

Select odd checkboxes

Select odd check boxes please help me with the code
for(let i=0;i<8;i++){
if(i%2==1){
document.querySelector(“ul.todo-list > li:nth-child(i) input.toggle”).click()
}
}
You can use the li:nth-child(odd) then set the checked attribute to true for those selected checkboxes.
This is an example:
let elements = document.querySelectorAll('ul.todo-list > li:nth-child(odd) input[type="checkbox"]');
for(var i=0;i<elements.length;i++){
elements[i].checked = true;
}
<ul class="todo-list">
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
</ul>

How to uncheck nested checkboxes and keep the current clicked checkbox in jquery?

I have nested checkboxes wrapped in a ul and li in WordPress. The html is written below.
<ul class="woof_list woof_list_checkbox">
<li>
<label class="woof_checkbox_label " for="woof_uncheck">Parent Category 1</label>
<ul class="woof_childs_list">
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 1</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="654" value="654">
<label class="woof_checkbox_label " for="">Product 1</label>
</li>
<li>
<input type="checkbox" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="644" value="644">
<label class="woof_checkbox_label " for="">Product 2</label>
</li>
</ul>
</li>
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 2</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="541" value="541">
<label class="woof_checkbox_label " for="">Product 3</label>
</li>
<li>
<input type="checkbox" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="542" value="542">
<label class="woof_checkbox_label " for="">Product 4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Parent Category 1
Sub Category 1
[checkbox] Product 1
[checkbox] Product 2
Sub Category 2
[checkbox] Product 3
[checkbox] Product 4
The default implementation of the html above is when I click any of the product labels, the checkbox beside it will be checked
Do you know how can I uncheck all of the checkboxes when I click a Product label but still check the clicked label?
For example: Product 4 checkbox is currently checked and when I click the label for Product 1, I want to uncheck Product 4 checkbox but Product checkbox will now be checked.
Do you have any idea how to do this? Thanks
My current jquery code is:
$('.woof_list woof_list_checkbox > li > .woof_childs_list > .woof_childs_list_li > .woof_childs_list > li > woof_checkbox_label ').click(function(){
$('.woof_checkbox_term').prop('checked', false);
$(this).find('.woof_checkbox_term').trigger('click');
});
Try this **JQUERY** Code
$(function(){
$('.woof_checkbox_term').on('click',function(e){
$('.woof_checkbox_term').prop('checked', false);
$(e.target).prop('checked',true);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_list woof_list_checkbox">
<li>
<label class="woof_checkbox_label " for="woof_uncheck">Parent Category 1</label>
<ul class="woof_childs_list">
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 1</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox" id="p1" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="654" value="654">
<label class="woof_checkbox_label " for="p1">Product 1</label>
</li>
<li>
<input type="checkbox" id="p2" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="644" value="644">
<label class="woof_checkbox_label " for="p2">Product 2</label>
</li>
</ul>
</li>
<li class="woof_childs_list_li">
<label class="woof_checkbox_label " for="woof_uncheck">Sub Category 2</label>
<ul class="woof_childs_list">
<li>
<input type="checkbox" id="p3" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="541" value="541">
<label class="woof_checkbox_label " for="p3">Product 3</label>
</li>
<li>
<input type="checkbox" id="p4" class="woof_checkbox_term" data-tax="product_cat" name="" data-term-id="542" value="542">
<label class="woof_checkbox_label " for="p4">Product 4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>

How to select next element using jquery?

I want to apply some design on the next element. But my problem is I am getting this error:
Error: Syntax error, unrecognized expression: [object Object] > label
Here's my selections:
BROWSE BY
<ul class="list-unstyled">
<li>
<input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
<label for="cat-1"><span></span>All</label>
</li>
<li>
<input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
<label for="cat-2"><span></span>Japanese Tea</label>
</li>
<li>
<input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
<label for="cat-3"><span></span>Black Vinegar</label>
</li>
<li>
<input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
<label for="cat-4"><span></span>Food</label>
</li>
<li>
<input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
<label for="cat-5"><span></span>Cosmetic / Health</label>
</li>
<li>
<input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
<label for="cat-6"><span></span>Others</label>
</li>
</ul>
Here's my JS:
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
$(cat + ' > label').css({'color':'red'}); //wont apply some css why?
});
Can you help me with this?
You need to use .next() traversal method to get the next sibling of an element
In your code cat is a jQuery object so when used in string concatenation your selector becomes [object Object] > label
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
cat.next('label').css({
'color': 'red'
}); //wont apply some css why?
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
<li>
<input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
<label for="cat-1"><span></span>All</label>
</li>
<li>
<input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
<label for="cat-2"><span></span>Japanese Tea</label>
</li>
<li>
<input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
<label for="cat-3"><span></span>Black Vinegar</label>
</li>
<li>
<input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
<label for="cat-4"><span></span>Food</label>
</li>
<li>
<input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
<label for="cat-5"><span></span>Cosmetic / Health</label>
</li>
<li>
<input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
<label for="cat-6"><span></span>Others</label>
</li>
</ul>
You can directly select the next label using the id attribute of selected input box
$('.category_select').on('change', function() {
var cat = this.id;
var category_type = $(this).data('category-type');
$("label").css({'color':'black'}) // Remove red color from previously selected item
$("label[for='"+cat+"']").css({'color':'red'}); // Apply red color on selected item
});
JSFIDDLE EXAMPLE
you need to use .next() selector for selecting the next element, instead $(cat + ' > label')
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
cat.next('label').css({'color':'red'}); //syntax for selecting next in js
});
Hope this helped you out??

Loop through list element and add text to the input value

I have along list li in div left with text, and div right with form inputs I want to append the form list text to input value of div right,
Both divs have the same number of element;
This is what I have
$(".left li").each(function(){
$(".right input").val($(".right input").val()+"_"+(this).text());
});
<div class="left">
<ul>
<li> value from list1 <li>
<li> value from list2 <li>
<li> value from list3 <li>
</ul>
</div>
<div class="right">
<ul>
<li> <input type="radio" name="somename" value="yes"> <li>
<li> <input type="radio" name="somename" value="yes"> <li>
<li> <input type="radio" name="somename" value="yes"> <li>
</ul>
</div>
I want the to archieve this
<input type="radio" name="somename" value="yes_value from list1">
<input type="radio" name="somename" value="yes_value from list2">
<input type="radio" name="somename" value="yes_value from list3">
There are two ways to do it
UPDATE, TRY THIS:
http://jsfiddle.net/p3e2fng1/
$("div.left li").each(function(e){
var theid = e + 1;
var theinput = $("div.right li:nth-of-type("+theid+")").find("input");
theinput.val(theinput.val() + "_" + $(this).text());
});

How to get last selected radio button id

I have two UL lists with some radio buttons. Now I want to get last selected radio button ID attribute form their UL.
For example:
If I selected radio button from first UL then return selected radio ID.
If I selected radio button from second UL then return seledted radio ID.
I have tried bellow code but not working properly. If you try with selecting first radio button from first UL you will get alert with selected ID, but when you selected radio button from second UL you will get alert from first UL and that I dont want. :(
I want to get last checked radio button ID from that UL.
Any idea how to do this?
Can you please check with this way:
First select 20 from first UL you will get 20.
Second select 80 from second UL you will get 80.
Now again change radio button from first UL and that changed radio ID I want.
Here is my JSFiddle.
Thanks.
$("#update_cart").click(function() {
var radioID = $("input[type='radio']:checked").attr("id");
if (radioID) {
alert(radioID);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="one">
<li>
<label for="1" class="label_check">
<input type="radio" id="1" name="one" value="10">10
</label>
</li>
<li>
<label for="2" class="label_check">
<input type="radio" id="2" name="one" value="20">20
</label>
</li>
<li>
<label for="3" class="label_check">
<input type="radio" id="3" name="one" value="30">30
</label>
</li>
<li>
<label for="4" class="label_check">
<input type="radio" id="4" name="one" value="40">40
</label>
</li>
<li>
<label for="5" class="label_check">
<input type="radio" id="5" name="one" value="50">50
</label>
</li>
</ul>
<ul class="two">
<li>
<label for="6" class="label_check">
<input type="radio" id="6" name="two" value="40">60
</label>
</li>
<li>
<label for="7" class="label_check">
<input type="radio" id="7" name="two" value="70">70
</label>
</li>
<li>
<label for="8" class="label_check">
<input type="radio" id="8" name="two" value="100">80
</label>
</li>
<li>
<label for="9" class="label_check">
<input type="radio" id="9" name="two" value="120">90
</label>
</li>
<li>
<label for="10" class="label_check">
<input type="radio" id="10" name="two" value="120">100
</label>
</li>
</ul>
<input type="button" id="update_cart" class="update_cart" value="Update Cart">
Use
$("#update_cart").click(function () {
var radioID = $("input[type='radio'].active").attr("id");
if (radioID) {
alert(radioID);
}
});
$("input[type='radio']").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
Working Demo

Categories

Resources