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");
});
Related
I need to hide a label & radio button after a checkbox was checked a page before. I need this to hide a radio button in a order process. The problem is that the checkbox and the label&radio are not at the same page.
This is my checkbox:
<input id="coupon" class="checkbox" name="coupon" value="yes" type="checkbox">
And this are the two elements I want to hide at the next page:
<input id="payment_paypal_1" class="radio" name="payment_paypal" value="2" required="" type="radio">
<label id="payment_paypal_2" for="payment_paypal">PayPal</label>
Thank you all in advance!
If on the same page then using jquery, you can do it like this -
$("#coupon").click(function() {
if ($(this).prop('checked')===true){
console.log("checked") ;
$('#payment_paypal_1').hide();
$('#payment_paypal_2').hide();
}
else {
console.log(" un checked") ;
$('#payment_paypal_1').show();
$('#payment_paypal_2').show();
}
});
I'm radio buttons on my webpage as a filter and the radio buttons are hidden, I just showing the labels.
The code looks like this:
<div class="filter">
<div class="field_row label-selected">
<input id="field_6_95_0" class="filteDataForSerialize" type="radio" value="0" name="f[g][6]">
<label for="field_6_95_0">Option 1</label>
</div>
<div class="field_row">
<input id="field_6_95_1" class="filteDataForSerialize" type="radio" value="1" name="f[g][6]">
<label for="field_6_95_1">Option 2</label>
</div>
<div class="field_row">
<input id="field_6_95_2" class="filteDataForSerialize" type="radio" value="2" name="f[g][6]">
<label for="field_6_95_2">Option 3</label>
</div>
</div>
And I'm using the following script:
jQuery('.filter div:first').addClass('label-selected');
jQuery('.filter label').on('click', function() {
var parent_div = jQuery(this).parent().addClass('label-selected');
jQuery('.filter').find('div').not(parent_div).removeClass('label-selected');
});
So by default the first element got the label-selected class and when I'm choosing any other that will got the class and the script delete from the other. It works until I'm using the same html snippet in the same page more times. In this case the jQuery remove every label-selected class from the page.
Css doesn't affect it I think, but:
.field_row > input{display:none};
.field_row > label{display:block;cursor:pointer;padding: 5px 10px;}
.label-selected > label{bacground-color:#000;color:#fff;}
You can remove the class from all the label's parent's siblings.
jQuery('.filter label').on('click', function() {
var parent_div = jQuery(this).parent().addClass('label-selected');
parent_div.siblings().removeClass('label-selected');
});
I have a search page that uses a form and checkboxes to display results. When the page reloads with the new results, I want to display something like this at the top of the page so users can easily remove one of their selections:
X Blue X Red X Black
My checkboxes look like this:
<input type="checkbox" name="color[]" id="color_white" value="white">White
<input type="checkbox" name="color[]" id="color_blue" value="blue" checked="checked">Blue
<input type="checkbox" name="color[]" id="color_red" value="red" checked="checked">Red
<input type="checkbox" name="color[]" id="color_orange" value="orange">Orange
<input type="checkbox" name="color[]" id="color_purple" value="purple">Purple
<input type="checkbox" name="color[]" id="color_black" value="black" checked="checked">Black
How do I go about getting the selected checkboxes, and then duplicating them at the top of the page so a user can just click on the X to make it "uncheck?"
Click events and form submission is done in jquery, so I'm assuming that this can be done that way too. Can anyone help? Thank you!
I would suggest adding a blank div at the top
<div id="checked"></div>
And then on load create a button for each checked input
$(function(){
$('input[type=checkbox]').each(function(){
if($(this).attr('checked')=='checked'){
$('#checked').append('<input id="'+$(this).attr('id').substring(6)+'" type="button" value="'+$(this).attr('id')+'">')
}
});
$('input').on('click',function(){
var i='color_'+$(this).attr('id');
$('#'+i).prop('checked','');
$(this).remove();
});
});
If a button is clicked remove the check and remove itself.
I have this code and what I need to with this is when selecting one radio button I want to display subscription_rate div. At the moment both main DIVs display together. I need to keeping hide subcription_rate div when click on a radio button.
hope someone help me out this..
this is my code so far...
<div class="form-element-row">
<div class="first-child">
<label for="name">Registration Period<img alt="required" src="images/required_star.png" />:</label>
</div>
<div class="last-child">
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Year
</div>
</div>
<div class="subscription_rate">
<div class="first-child">
<label> </label>
</div>
<div class="last-child">
<table>
<tr>
<th>Subscription Rate</th>
<th>1 Year</th>
<th>2 Years</th>
<th>3 Years</th>
</tr>
<tr>
<td style="text-align: left;">Lanka Institute Rates for Tutors within their subscription period.</td>
<td width="18%">Rs.3000</td>
<td width="18%">Rs.4500<br /><span>Save 25%</span></td>
<td width="18%">Rs.7500<br /><span>Save 50%</span></td>
</tr>
</table>
</div>
</div>
You need to bind change event handler with radio button and use show() / hide() functions.
Live Demo
$('.subscription_rate').hide();
$('[name=period]').change(function(){
$('.subscription_rate').show();
});
To toogle between change of radion buttons, you can use toogle()
Live Demo
$('.subscription_rate').hide();
$('[name=period]').change(function(){
$('.subscription_rate').toggle();
});
First hide the div in the css:
display:none;
then use this script:
$('input[name="period"]').change(function(){
$('.subscription_rate').slideDown('slow'); // .slideDown(800);
});
First hide it by using .hide() in jquery and use .show() when you want to display it after the user clicks the radio button,
$(document).ready(function(){
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function(){
if($('input[type=radio]:checked').val()==1){ //check which radio button is clicked, here its 1
$('.subscription_rate').hide();
}else if($('input[type=radio]:checked').val()==2){
$('.subscription_rate').fadeIn("slow"); // show the div with fadeIn
}else if($('input[type=radio]:checked').val()==3){
$('.subscription_rate').hide();
}else{
$('.subscription_rate').hide(); // if in any case radio button is not checked by user hide the div
}
});
});
JSFIddle demo
I have two grid views containing 12 and 24 rows resp. Each row contains radiobutton list(Yes/No). Below both the grids, there is one more radio button list. In first grid, all radio buttons are by default "Yes". If any one selects know, the radio button below the grids should become disabled with selection ="No". In second grid the radio buttons are by default "No". If any one selects Yes, the radio button below the grid should become disabled with selected value="No". All these work should be done through javascript...
How can I do so...???
First user clicked a button at first grid. Then you capture it and changed the second grid to false. Use EventListener. I used checkbox for this job. Because you cant set more than 1 radio button checked at same time in same form.
<h3>First Grid</h3>
<input id="radio1_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio1_2" type="checkbox" name="correctAnswer" value="2">No
<br>
<h3>Second Grid</h3>
<input id="radio2_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio2_2" type="checkbox" name="correctAnswer" value="2">No
<br>
<h3 id="h3">Third Grid</h3>
<input id="radio3_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio3_2" type="checkbox" name="correctAnswer" value="2">No
And a jQuery function
$(document).ready(function(){
$('#radio1_2').prop('checked', true);
$('#radio2_2').prop('checked', true);
$('#radio3_2').prop('checked', true);
$('#radio1_1').click(function(){
$('#radio2_2').prop('checked', false);
$('#radio2_2').prop('disabled', true);
})
$('#radio2_1').click(function(){
$('#radio3_2').prop('checked', false);
$('#radio3_2').prop('disabled', true);
})
});
You can find this example at this link