Using jQuery, hide a textbox if a radio button is selected - javascript

I have 2 radio buttons, what I want is if a user selects the top radio button then hide a textbox.
Not sure how to bind an event to a radio button.

Something like this:
<input type="radio" name="foo" value="top" />
<input type="radio" name="foo" value="bottom" />
And in jQuery:
$('input[name=foo]').click(function() {
if($(this).val() == "top") {
$('#textbox').hide();
} else {
$('#textbox').show();
}
});
click because change doesn't seem to work correctly on IE.

This will allow you to add the event to a selected radio, in case your radio's do not have the same name.
$('checkbox-selector').click(function() {
if ($(this).is(':checked')) {
$('textbox-selector').hide();
}
else {
$('textbox-selector').show();
}
});

Related

jquery - check/uncheck customized checkbox with hidden input

I have this in HTML
<div class="my-checkbox">
<label>I do agree</label>
<input type="hidden" name="agreement" value="0">
</div>
and this in jQuery
$('.my-checkbox').on('click', function()
{
if($(this).children('[type="hidden"]').val() == 0)
{
$(this).children('[type="hidden"]').val(1);
$(this).addClass('active');
}
else
{
$(this).children('[type="hidden"]').val(0);
$(this).removeClass('active');
}
});
When I click .my-checkbox, it will change the value to 1 and add class active and when I click it again vice-versa. It works correctly but in mobile device when I click it it changes the value and set to active but when I click it again, it changes the value but the active class doesn't remove. How do I know that? just by double clicking and submit the form and the result was => you should agree with agreements.
Thanks
Makes no sense to reinvent the checkbox when it is a is simple CSS to change the style to make it work the same way. No adding/removing classes. No JavaScript needed, just a simple CSS selector.
#agree + label {
color: red
}
#agree:checked + label {
color: green
}
<div class="my-checkbox">
<input type="checkbox" id="agree" name="agreement" hidden>
<label for="agree" >I do agree</label>
</div>
Now why does your code not work?
if($(this).children('[type="hidden"]').val() == 0) <-- If zero
{
$(this).children('[type="hidden"]').val(0); <-- set zero
You are not toggling to 1. You have your logic reversed.

Radio Button On select or unselect Javascript Jquery

When i select the radio button then i want to hide one div and when i uncheck the radio button then i want to show that div . please if anyone know. I want to hide div on check the radio button.
<input type="radio" id="fix" name="price" checked="checked" value="fix">
<div id="hour">
<input type="text" name="rs"/>
</div>
You can use the change() function from jQuery that triggers when the selector has been changed. Then just compare the val() with your value, and take action.
$("input[type='radio']").change(function() {
if ($(this).val() == "fix") {
// show div
} else {
// hide div
}
});
You have single radio button you probably want to use checkbox instead. As single radio button could not be unchecked.
Live Demo
Html
<input type="checkbox" id="fix" name="price" checked="checked" value="fix">
Javascript
$('#fix').change(function(){
$('[name=rs]')[0].style.display = this.checked ? 'block' : 'none';
});
$("input[type='radio']").change(function() {
if ($(this).val() == "fix") {
document.getElementById("hour").style.display = '';
} else {
document.getElementById("hour").style.display = 'none';
}
});
Simple solution.
We can't uncheck a radio button when there is only one.
So, change the input type to checkbox. Then you can use this CSS:
:checked + #hour{
display: none;
}
Working Fiddle

Checking a different checkbox hides input field

I have an input field that only shows when the option "Other" is checked. The input field fades out when I uncheck the "Other" checkbox, but I would also like the input field to fade out say if, instead of unchecking the "Other" checkbox I check another checkbox of the same group. Therefore, the "Other" input field should not be visible unless "Other" is checked. I have the javascript partially working, but when I check another checkbox the "Other" input field stays visible.
HTML
<input type="checkbox" id="residence_check" name="found"/>
<label for="residence_check">
Residence
</label>
<input type="checkbox" id="tradeshow_check" name="found"/>
<label for="tradeshow_check">
Tradeshow
</label>
<input type="checkbox" id="office_check" name="found"/>
<label for="office_check">
Office Building
</label>
<input type="checkbox" id="check_other" value="found_other" name="found"/>
<label for="check_other">
Other
</label>
<input type="text" id="check_input" placeholder="Other"/>
Javascript
$('#check_other').change(function() {
if($(this).is(":checked")) {
$('#check_input').fadeIn();
} else {
$('#check_input').fadeOut('fast');
}
});
From what I gather from your use case is that you don't want to use checkboxes, but radio buttons. If that is the case, this would be a good way to implement what you want:
http://jsfiddle.net/AeP58/1/
$('input[type=radio]').on('change', function() { //event on all radio buttons
if($(this).attr('id') == 'check_other' && $(this).prop('checked')) {
$('#check_input').fadeIn();
} else {
$('#check_input').fadeOut('fast');
}
});
If you do want checkboxes, you could change the code a bit and probably get what you want.
If you want to have some fun with checkboxes you could try this:
function showHideOtherInput() {
console.log($(this)[0]==$('#check_other')[0]);
var shouldShow=$('[id$="_check"]:checked').length===0 && $('#check_other').prop('checked');
console.log(shouldShow);
if(shouldShow) {
$('#check_input').fadeIn();
} else {
$('#check_input').fadeOut('fast');
}
}
$('#check_input').hide(); //since nothing is selected at this point just hide the input
$('#check_other').change(showHideOtherInput);
//for each XXXX_check checkbox trigger the show or hide function
$('[id$="_check"]').each(function(ix,el){$(el).change(showHideOtherInput)});
Hope this works for you.
:)

call change() event handler if I select radio button programatically

I have HTML like this:
<input type="radio" name="type" value="FL" checked="checked" />Fixed
<input type="radio" name="type" value="SV" />Saving
<input type="radio" name="type" value="L2" />Type 2
And following script
$(function () {
$('input[name=type]').change(function () {
alert($(this).val());
});
$('input[value=SV]').attr('checked', 'checked');
});
Firstly, have added a change event to radio button.
change event handler triggered if I am selecting radio button from UI.
But it does not triggered when I change selected radio button value pro-grammatically.
I want change event also to be triggered when I select radio button pro-grammatically.
You can use trigger() to programmatically raise an event:
$(function () {
$('input[name="type"]').change(function() {
console.log($(this).val());
});
$('input[value="SV"]').prop('checked', true).trigger('change');
});
It won't change automatically. You have to do one of the following:
either
$('input[value=SV]').attr('checked', 'checked').trigger("change")
or
$('input[value=SV]').attr('checked', 'checked').change();

How to output the value of my radio button when click

I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.
Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.
With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());
Try this
$('.hover-star').click(function () {
alert($(this).val());
}
Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());
Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/

Categories

Resources