I have the following code listed a number of times on the same page and I want to be able to display the data-name value in the foo-title span element when a radio button is clicked. The problem is that because .foo-title span is in the DOM several times the text is updating everywhere and not in the 1 place. I have tried several methods like .parent() .closest . prev() but cant figure it out.
The labels are styled with a background image and the text is hidden which is why I want to do the above to show the users some text information for accessibility reasons.
HTML
<div class="col-sm-4">
<p class="foo-title">
<span></span>
</p>
<ul class="foo-container-list">
<li class="foo-list-item">
<input class="foo-input" data-name="red" id="foo_id_1" name="foo_id" type="radio" value="1">
<label for="foo_id_1">red</label>
</li>
<li class="foo-list-item">
<input class="foo-input" data-name="green" id="foo_id_2" name="foo_id" type="radio" value="2">
<label for="foo_id_2">green</label>
</li>
<li class="foo-list-item">
<input class="foo-input" data-name="blue" id="foo_id_3" name="foo_id" type="radio" value="3">
<label for="foo_id_3">blue</label>
</li>
</ul>
</div>
JS
fooBar.updateFooName = function(foo) {
var fooName = foo.data('name');
if (fooName) {
$('.foo-title span').text(fooName);
}
};
$(document).ready(function() {
$("input[name=foo_id]:radio").change(function() {
fooBar.updateFooName($(this));
});
});
fooBar.updateFooName = function() {
var fooName = $(this).data('name');
if (fooName) {
$(this).closest('[class^="col-sm"]').find('.foo-title span').text(fooName);
}
};
$(document).ready(function() {
$("input[name=foo_id]:radio").change(fooBar.updateFooName);
});
FIDDLE
Related
Hello I'm fairly new to jQuery (and stackoverflow), i saw a few questions about showing/hiding div for checkbox but i couldn't find a solution that apply for several checkboxes at the same time.
I would like to make it work so that when my first checkbox is checked, the 1st div/panel just after is shown then hiden when uncheck. And the same thing for my second checkbox with its own panel.
Right now, both panel are shown when first checkbox (or second checkbox) is checked.
I don't know how to make it so the panel shown or hidden will be dependant of the checkbox (li?).
I would like a solution that could apply without touching the code when adding new checkboxes, so i think maybe ID shouldn't be use, right? is there any solution?
Your help is much appreciated!
Thanks in advance!
HTML :
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
JQUERY:
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
panel.show();
} else {
panel.hide();
};
});
});
by using the children method, you can call the respective div element.
and used 'parents' to access the outside element.
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
$(this).parents('li').children('.js-tabCheck-panel').show();
} else {
$(this).parents('li').children('.js-tabCheck-panel').hide();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
I am making a theme changer in my framework7 app, here is the code of color changer using radio button
<ul id="bluegr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="blue" checked>
<div class="item-inner">
<div class="item-title">Blue</div>
</div>
</label>
</ul>
<ul id="graygr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="gray">
<div class="item-inner">
<div class="item-title">Gray</div>
</div>
</label>
</ul>
And here is theme changer
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-dark" checked>
<div class="item-inner">
<div class="item-title">Dark</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-white">
<div class="item-inner">
<div class="item-title">Light</div>
</div>
</label>
</li>
</ul>
And here is the javascript of making those color and theme changer work
var myApp = new Framework7();
var $$ = Dom7;
$$('input[name="color-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('theme-blue theme-gray theme-lightblue');
$$('.view').addClass('theme-' + $$(this).val());
}
});
$$('input[name="layout-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('layout-dark layout-white');
$$('.view').addClass(this.value);
}
});
Demo: http://qa.ftios.net/61-2
But when I try it out, it does change the color and theme but when I reload and it reverts back to default, so how can I fix this?
You haven't stored the selection anywhere so every time you reload the page the DOM will just revert back to the original state.
The simplest way would be to save the selection to localStorage and upon that module/page being called, you simply check to see if the item exists and if it does, based on its value, you would set the theme to that.
I am trying to add a new item into a list from a text box using jQuery but it's not working. There are a lot of code here, I want to find the problem in my code.
HTML code
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul>
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>
</div>
</br>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<input type="submit" id="addButton" value="Add"/>
</form>
And the jQuery code
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('item:textbox');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
var $newText=$('input:textbox').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
I know this has an accepted answer - and I didn't read your question fully so this may not do exactly what you want - but I wanted to present an alternate approach with less code. The following features a button that when you click it - takes the value from the textbox and appends it to the list (note that I gave the list an ID). Just so you have another option. You don't need tjhe form at all and you certainly don't need to submit it - just to get the value and append it to the list. Just saying.
$(document).ready(function(){
$('#addButton').click(function(){
var newItem = $('#itemDescription').val();
$('#myList').append('<li class="hot">' + newItem + '</li>');
$('#itemDescription').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul id="myList">
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<button type="button" id="addButton">Add</button>
check this fiddle.
you had a small error in your jQuery. Here is the working code:
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('#itemDescription');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
e.preventDefault();
var $newText=$('#itemDescription').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
first you have to prevent the default behaviour from the form element on submit. To do this i added the e.preventDefault(); function. then I received this error:
Uncaught Error: Syntax error, unrecognized expression: unsupported
pseudo: textbox
To fix this, I changed the selector to the ID of the input field. Now it works perfectly fine.
I want to use jquery function to find all div on checkbox change event instead of hard-coding id and class name in jquery selector.
There are 2 sections in my code with Id name section1 and section2 and so on chkall event i want to find this div id and pass this as jquery selector
This is my code:
HTML:
<div class="header">
<asp:CheckBox ID="chkAll" CssClass="checkallparent" runat="server" Text="Select All" />
</div>
<div class="abc">
<ul class="list">
<div id="section1" class="section">
<li class="carousel-border">
<input type="checkbox" id="chkParent1" class="chkParent" /> --Parent of below 2 checkboxes
</li>
<li>
<input type="checkbox" id="chkchild1" class="chkChild"/>
</li>
<li>
<input type="checkbox" id="chkchild2" class="chkChild"/>
</li>
</div>
<div id="section2" class="section">
<li class="carousel-border">
<input type="checkbox" id="chkParent2" class="chkParent" />--Parent of below 2 checkboxes
</li>
<li>
<input type="checkbox" id="chkchild3" class="chkChild" />
</li>
<li>
<input type="checkbox" id="chkchild4" class="chkChild"/>
</li>
</div>
</ul>
</div>
SCRIPT:
$(".checkallparent").change(function () {
//on this event i want to check all my checkboxes and this is how i am doing.
if ($("#chkAll").prop('checked') == true) {
//for section 1
$(this).find('input:checkbox[id^="chkParent1"]').prop('checked', true)
$(this).closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
$(this).closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
// Above is not working but when i do like below it is working
$("#section1 .chkParent").find('input:checkbox[id^="chkParent1"]').prop('checked', true)
$("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
$("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
//I dont want to hardcode like this instead i would like to use any jquery function
//which would find this 1st div and 2nd(for eg section1 and section2 etc... )
}
});
So can anybody tell me how to do this??
This code should help you figure that out. The first change event sets the parent checkboxes, then triggers off the change event of those parents.
The second change event handle the parent items.
$(".checkallparent").change(function () {
var checked = $(this).is(":checked");
var parentCBs = $("input[type='checkbox'].chkParent");
parentCBs.each(function(i, el) {
el.checked = checked;
$(el).trigger("change");
});
});
$("input[type='checkbox'].chkParent").change(function () {
var checked = $(this).is(":checked");
var div = $(this).closest("div");
var childCBs = div.find("input[type='checkbox'].chkChild");
childCBs.each(function(i, el) {
el.checked = checked;
});
});
Here is a working Fiddle.
I have the following markup. I would like to add class_A to <p class="subitem-text"> (that holds the radio button and the label) when user clicks on the <input> or <label>.
If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. Effectively, in each <li>, only one <p class="subitem-text"> should have class_A added to it.
Is there a jQuery plug-in that does this? Or is there a simple trick that can do this?
<ul>
<li>
<div class="myitem-wrapper" id="10">
<div class="myitem clearfix">
<span class="number">1</span>
<div class="item-text">Some text here </div>
</div>
<p class="subitem-text">
<input type="radio" name="10" value="15" id="99">
<label for="99">First subitem </label>
</p>
<p class="subitem-text">
<input type="radio" name="10" value="77" id="21">
<label for="21">Second subitem</label>
</p>
</div>
</li>
<li>
<div class="myitem-wrapper" id="11">
<div class="myitem clearfix">
<span class="number">2</span>
<div class="item-text">Some other text here ... </div>
</div>
<p class="subitem-text">
<input type="radio" name="11" value="32" id="201">
<label for="201">First subitem ... </label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="68" id="205">
<label for="205">Second subitem ...</label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="160" id="206">
<label for="206">Third subitem ...</label>
</p>
</div>
</li>
</ul>
DEMO: http://jsbin.com/ebaye3
since you are putting all inside P you can use it!
$(function($) {
$('.subitem-text').click(function() {
$(this).parent().find('.subitem-text').removeClass('class_A');
if ( $(this).children(':radio').is(':checked') ) // for sake! ;-)
$(this).addClass('class_A');
});
//you can also write it like this:
$('.subitem-text :radio').click(function() {
$(this).parent().parent().children().removeClass('class_A');
if ( $(this).is(':checked') )
$(this).parent().addClass('class_A');
});
});
You can do something like this:
// find all the radio inputs inside a subitem-text
$('.subitem-text input[type=radio]').bind('change', function() {
// find our parent LI
var $li = $(this).closest('li');
// remove any "class_A"
$li.find('.class_A').removeClass('class_A');
// find the subitem with the checked input and add "class_A"
$li.find('.subitem-text:has(input[checked])').addClass('class_A');
});
jsbin preview/demo
Like this:
$(':radio').click(function() {
$(this).closest('ul').find('.subitem-text').removeClass('active');
$(this).closest('.subitem-text').addClass('active');
});
There is no set way to do this since it is dependent on the html in your document. The simplest way to do this is to bind to each of your radio input elements but you can also use event delegation and bind to the div.myitem-wrapper, li, parent ul or event body tag.
Just binding click handlers to each of the input elements we are interested in:
$("div.myitem-wrapper input[type=radio]").bind('change', function (event) {
$(event.target).is(':checked').closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
});
Same thing but using event delegation to reduce the number of handlers to one. This can really speed things up if you find that you are binding to a large number of elements.
$("#id_of_the_parent_UL").bind('change', function (event) {
var $target = $(event.target);
if ($target.is('input[type=radio]:checked')) {
$target.closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
}
});
Note that it is perfectly valid to say $(this) instead of $(event.target) but it will give different results if and when you start moving to event delegation. An added advantage is that it will be easier for you or the next guy to understand the code in in two months if you go with event.target.