Develop Reference

Add/remove class to siblings

I have got tr with radio buttons. I can choose only one button on line. I need to make it so that when the button is selected, only it remains on the line, and the rest are hidden. If you press the button again when all the buttons are hidden - they should appear.
I write some code
$('#page tbody tr td:nth-child(2) div:nth-child(2)').click(function () {
if ($('.checked-parent').siblings().hasClass("to-hide")) {
$('.checked-parent').siblings().removeClass("to-hide");
}
});
$('.checked-parent').siblings().addClass("to-hide");
I have a set of divs, among them one with the class .checked-parent
To all of his relatives a class of to-hide is added.
If I click on the diva with the class .checked-parent the to-hide class of the relatives will be deleted and they will be visible again.
My questions:
1) How to make it so that when you click add a class of to-hide to all elements except for the element with class .checked-parent
2) How can I make the function function take not all existing relatives on the page but work inside each line separately? (now either all of my buttons are visible or all are hidden, regardless of the line)

I believe you can simplify your problem a great deal using the proper jQuery selectors. Below you will see <tr> rows with radio buttons. When you select one the button and its label will toggle (hide and show).
Starting from line 1 we add a click event handler on all radio buttons.
Then find the closest <td> element to that clicked radio button and find all radio buttons in that <td> except for the one clicked - .not(this)
Then for each radio button in that closest <td> we will toggle the visibility for it and the label with the matching id in its for attribute.
If this is just a normal form with radio buttons I would suggest not hiding choices from the user as this is not something that is expected behavior and your users may get frustrated.
$("input:radio").on("click", function() {
$(this).closest("td").find("input:radio").not(this).each(function() {
var id = $(this).attr("id");
$(this).toggle();
$("label[for='" + id + "']").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<div> Select something</div>
<label for="test1"> Test 1</label>
<input id="test1" type="radio" name="group1" value="test1">
<label for="test2"> Test 2</label>
<input id="test2" type="radio" name="group1" value="test2">
<label for="test3"> Test 3</label>
<input id="test3" type="radio" name="group1" value="test3">
</td>
</tr>
<tr>
<td>
<div> Select something again</div>
<label for="test4"> Test 4</label>
<input id="test4" type="radio" name="group2" value="test4">
<label for="test5"> Test 5</label>
<input id="test5" type="radio" name="group2" value="test5">
<label for="test6"> Test 6</label>
<input id="test6" type="radio" name="group2" value="test6">
</td>
</tr>
</tbody>
</table>

this hides all sibling's with class to hide except checked-parent & add's class to all sibling's on next click
$('#page tbody tr td:nth-child(2) div:nth-child(2)').click(function () {
if ($('.checked-parent').siblings().hasClass("to-hide")) {
$('.checked-parent').siblings().not('.checked-parent').removeClass("to-hide");
}
else
$('.checked-parent').siblings().not('.checked-parent').addClass("to-hide");
});

Show or Hide field when selected radio button codeigniter

I am currently doing a project. I have 2 radio button,1) One way 2) Round trip. When the user tried to select the One way radio button, the return text field will hide.
I've saw a thread and someone comment regarding to this problem. Scenario: I chose the One way radio button, the return field will disappear, yes it is working but there's some problem. What if I change my mind, from one way radio button to Round trip? The problem is the return field didn't came back
**View **
// my radio button
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="" >One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
// the return field that will hide/show
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
JS
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function(){
$('div[id^="try"]').hide(); // hide all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>

Just use .toggle()
.toggle()
Description: Display or hide the matched elements.
With no parameters, the .toggle() method simply toggles the visibility of elements:
REF: http://api.jquery.com/toggle/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="">One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function() {
$('div[id^="try"]').toggle(); // toggle all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>

Radio input not working with localStorage

Radio input not working with localStorage
I used localStorage for many examples and work with me good except starRating.
Here is example example
I tried many codes , but does not work
Please give me example. Sorry I'm newbie.
<table>
<thead>
<tr>
<th STYLE="width:200px">link</th>
<th STYLE="width:200px">rating</th>
<th STYLE="width:200px">Options</th>
</tr>
</thead>
<tr>
<td>
<A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site a</A>
</td>
<td>
<span class="starRating">
<input CLASS="inputrating" CHECKED id="rating_9_5" type="radio" name="rating_9" value="5">
<label for="rating_9_5">5</label>
<input CLASS="inputrating" id="rating_9_4" type="radio" name="rating_9" value="4">
<label for="rating_9_4">4</label>
<input CLASS="inputrating" id="rating_9_3" type="radio" name="rating_9" value="3">
<label for="rating_9_3">3</label>
<input CLASS="inputrating" id="rating_9_2" type="radio" name="rating_9" value="2">
<label for="rating_9_2">2</label>
<input CLASS="inputrating" id="rating_9_1" type="radio" name="rating_9" value="1">
<label for="rating_9_1">1</label></span>
</td>
<td>
add
</td>
</tr>
<tr>
<td>
<A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site b</A>
</td>
<td>
<span class="starRating">
5
4
3
2
1
add
$(".starRating").on("click", function(){
selected_rating = $('input', this).data("inputrating");
selected_id = $('input', this).data("rating-id");
console.log(selected_rating)
});

You need to change your event binding to the Radio Buttons, not the spans that contain them.
Next, you need to access the values of the radio buttons, rather than using the jQuery .data() method, which I'm not sure what you are doing with.
this.value
In the event handler is all you need for that.
Next, you need to actually store the values, which you didn't have any code for:
if(window.localStorage){
localStorage.setItem("Site A Rating", this.value);
} else {
console.log("localStorage not supported.");
}
Here is a working Fiddle: https://jsfiddle.net/6jfey3cj/4/
And a screen shot showing the different site's ratings in localStorage.

The key issue you are struggling with is how to decide which element is best to trigger your function on. You are currently triggering on .starRating which is a span. It is possible to use that as the trigger but makes much more sense to simply fire the function whenever someone chooses a value on .inputrating which is a class that is unique to all your star rating radio buttons.
Try this code out:
$(".inputrating").on("change", function(){
checked_rating = $(this).val();
checked_id = $(this).attr('id');
console.log(checked_rating);
console.log(checked_id);
});
If you notice I changed click to change. This will make it so that your code only fires once on rating select. That way if you end up running an ajax function to update a database it won't keep getting called over and over if the user decides to spam click the same radio button over and over.
Here is a working fiddle demonstrating the solution: JSFiddle

You can change your javascript function as below
$(".inputrating").on("click", function(){
selected_rating = $(this).val();
selected_id = this.id;
console.log(selected_rating);
console.log(selected_id);
});
updated fiddle -
https://jsfiddle.net/tfhg15xw/2/

Show/Hide label based on value?

In my project I have situation where I have to check value of my input and then show/hide elements. Here is my HTML code:
<td>
<label class="test1">
<input type="radio" name="reservation" class="bls" id="bls_1" value="10"/>
</label>
<label class="test2" style="display:none">
<span>John, Cook</span>
</label>
</td>
<td>
<label class="test1">
<input type="radio" name="reservation" class="bls" id="bls_2" value="0"/>
</label>
<label class="test2" style="display:none">
<span></span>
</label>
</td>
Here is my JQuery:
$('.bls').each(function() {
if($(this).val() > 0){
$(this).parent('.test1').hide();
$('.test2').show();
}
});
My current code hide radio button based on the values but I have a problem with show() effect. I want only element in the same td to show.
My current code display all label with class name test2. I want to display label only for td where my value is greater than 0. How that can be done in JQuery?

Try to chain the next() and show() from this object,
$('.bls').each(function() {
if($(this).val() > 0){
$(this).parent('.test1').hide().next('.test2').show();
}
});

You would just do the same as you did for the hide() method and use this:
$(this).closest('td').find('.test2').show();

You could use closest to get the parent td then find the label with class test2 and show it :
$(this).closest('td').find('.test2').show();
Full code :
$('.bls').each(function() {
if($(this).val() > 0){
$(this).parent('.test1').hide();
$(this).closest('td').find('.test2').show();
}
});
Hope this helps.

Jquery/javascript Radio button hide/show logic for checked attribute for pageload

I was trying to code jquery/JS logic for hide/show description based on radio button being checked or not. If the radio button is checked on page load, i want the description associated with that radio button to load. But the default one of the either has to selected/checked
I did try to code with .change and click methods inside ready(). But was not successful
I have only two radio buttons, I'm not a Javascript/jquery person. Any input is appreciated. This is an example
<div id="ServiceSelection">
<input type="radio" name="Service" checked="Checked" value="B"> Option 1
<br>
<input type="radio" name="Service" value="P"> Option 2
<br>
<div id="DivB" style="display:none" class="desc">B Description goes here </div>
<div id="DivP" style="display:none" class="desc">P Description goes here </div>
</div>
Edited DIV:
<div id="ServiceSelection">
<input type="radio" name="Service" checked="Checked" value="B"> Option 1
<br>
<div id="DivB" style="display:none" class="desc">B Description goes here </div>
<input type="radio" name="Service" value="P"> Option 2
<br>
<div id="DivP" style="display:none" class="desc">P Description goes here </div>
</div>
Thanks in advance
J

if($('input[name=Service]').is(':checked')){ //is it checked?
var v = $('input[name=Service]:checked').val(); //get the value
$('div[id$='+v+']').show(); //target the end of selector, and match it to our value
}
$('input[name=Service]').on('click', function(){
$(this).parent().find('div').hide(); //hide the divs...
$('div[id$='+$(this).val()+']').show(); //show the div based on our value again..
});
fiddle

Try this:
function ShowData(evt) {
var val = $("input[name=Service]:checked").val();
if (val == 'B') {
$('#DivB').show();
$('#DivP').hide();
} else {
$('#DivP').show();
$('#DivB').hide();
}
}
$('input[name=Service]:radio').change(ShowData);
ShowData();
DEMO HERE

I'd suggest:
// hide the div elements with JavaScript, so they're visible to those
// users with JavaScript disabled:
$('#ServiceSelection div[id]').hide();
// select the radio input elements and bind to the change event
$('input:radio').change(function(){
// find the element whose id is equal to 'Div' + the value of the radio,
// show that div, hide the sibling div elements
$('#Div' + this.value).show().siblings('div').hide();
// filter the radio elements to find the one that's checked, and trigger the change event
}).filter(function(){return this.checked; }).change();
JS Fiddle demo.
References:
change().
filter().
hide
().
show().
siblings().