jQuery/JavaScript - Hide / Show Drop down box pending on Radio Button - javascript

I want to make it so that the drop-down is only displayed when the radio button (option 3) is clicked and have it hidden if either 1 or 2 is selected. What would be the best way to complete this? I have a little bit of experience with JavaScript and slim to none with jQuery but it seemed like it might be the way to go.
Thanks for any help,
Dan
Here is the HTML code I have as of now:
<p class="help">Selection:</p>
<div id='buttons'>
<label><input type="radio" name="select" /> Option 1 </label>
<label><input type="radio" name="select" /> Option 2</label>
<label><input type="radio" name="select" /> Option 3</label>
</div>
<div id="list" style="display: none;">
<label>Please Select From the List:
<select>
<option>True</option>
<option>False</option>
</select>
</label>
</div>


$(document).ready(function(){
$("[name=select]").change(function(){ // Whenever the radio buttons change
$("#list").toggle($("[name=select]").index(this)===2); // Only keep the list open when it's the last option (First option = 0, Third option = 2)
});
});
This code in action.


Assuming you are using jquery, as it sounds like it from your question, you could modify your HTML like so:
<p class="help">Selection:</p>
<div id='buttons'>
<label><input type="radio" name="select" id="option1" /> Option 1 </label>
<label><input type="radio" name="select" id="option2" /> Option 2</label>
<label><input type="radio" name="select" id="option3" /> Option 3</label>
</div>
<div id="list">
<label>Please Select From the List:
<select id="mySelect">
<option>True</option>
<option>False</option>
</select>
</label>
</div>​
</p>
Then you could write some jquery like so:
$(document).ready(
function()
{
$("#option1, #option2, #option3").click(
function()
{
if (this.id == "option3")
$("#mySelect").hide();
else
$("#mySelect").show();
});
});​
You can see it working here: http://jsfiddle.net/AVFuY/3/
EDIT: I removed the unneeded class and just used the id's so as to not confuse and add unnecessary code.


Since this is a fairly basic question, I think it'll be instructional to walk you through the jQuery documentation while I answer your question. If you know truly nothing about jQuery, I recommend following this short tutorial first -- it will make things much, much easier for you in the future: jQuery Documentation - Getting Started With jQuery
Your requirement is that something happens (in this case, another element is hidden/shown) when we click the radio buttons. There's two parts to this problem: first, we need to find the radio buttons, then we need to make something happen when we click it.
1. Finding the radio buttons
Take a look at the jQuery Selector documentation here: http://api.jquery.com/category/selectors/
As you can see, there's a specific pseudo-selector for radio buttons, ":radio". We want to select everything inside of the element with ID "buttons", so this is how the selector will look in total:
$("#buttons input:radio");
By the way, it's called a "pseudo-selector" because it filters items we've already selected (in this case, input tags inside of a div with id "button"). Pseudo-selectors always start with a ":".
2. Making something happen when we click them
Consult the jQuery Events reference here: http://api.jquery.com/category/events/
We want the ".click()" event here, clearly. Once we've selected our elements, we can apply a click handler to them like this:
$("#buttons input:radio").click(function() {
// make something happen here
alert("input button clicked: " + $(this).index());
});
Note that this will apply the same click handler to all three of the input buttons, but you can access the specific element that was clicked via the "this" keyword. Wrapping $() around it makes it into a jQuery selection rather than just a Javascript object and allows us to call jQuery functions on it.
3. Hiding and showing the list element conditionally
Let's extend the code above to actually hide and show that other div, depending on which item was clicked. We're going to refer to the jQuery Effects documentation so that we can make hiding and showing it exciting: http://api.jquery.com/category/effects/
The functions we'll be using are ".slideUp()", which hides an element, and ".slideDown()", which shows it. We'll also be using the ".index()" function I used in the previous example to figure out which button was clicked, although I recommend giving the button a unique ID in the future so that your code isn't dependent on the order of the buttons. Here's the final code:
$("#buttons input:radio").click(function() {
// if it was the third button (0-indexed, so the 3rd one is index 2)...
if ($(this).index() == 2) {
// display the element with ID "list"
$("#list").slideDown();
}
else {
// hide the element with ID "list"
$("#list").slideUp();
}
});
Sorry for the length of this answer, but hopefully it was more conducive to your understanding of jQuery than "copy and paste this 3-line super-compact solution".


<label><input type="radio" name="select" onclick="document.getElementById('list').style.display=this.checked?'':'none'" /> Option 3</label>


Without changing your markup:
$(function()
{
$("#list").hide();
$("#buttons input:radio[name=select]").click(function()
{
var myindex = $("#buttons input:radio[name=select]").index(this);
if (myindex == 2)
{
$("#list").show();
}
else
{
$("#list").hide();
};
});
});
EDIT: Another option: just show it on the last button in the list.
$(function()
{
$("#list").hide();
$("#buttons input:radio[name=select]").click(function()
{
var myindex = $("#buttons input:radio[name=select]").index(this);
var lastone = $("#buttons input:radio[name=select]:last").index("#buttons input:radio[name=select]");
if (myindex == lastone)
{
$("#list").show();
}
else
{
$("#list").hide();
};
});
});

Related

Show one div and hide the other by checked radio button

I'm trying to learn how to use jquery to show/hide elements dependent on values. i'm not sure if .show / .hide is the right choice so any help will be appreciated...
Here is my example on jsfiddle where I have 2 radio buttons and 2 divs.
I want Jquery to show a single div by the dependency of the checked radio button, so it will show only the one that is checked.
HTML:
<input type="radio" name="one" value="01" checked> Male<br>
<input type="radio" name="two" value="02"> Female<br>
<div class="showhide">
show me when 01 is checked.
</div>
<div class="showhide">
show me when 02 is checked.
</div>
JQuery (trying to understand what to do here):
$("div.showhide").hide();
$("div.showhide").show();
// or maybe with:
$("div.showthis").toggle(this.checked);

Using data-* attributes comes in handy in such practices. Rember that the radios name attributes must be the same that one and only one checkbox can be checked at any given time. And, there is no p tag in your code, at least in the example provided, so why bother prefixing the selector with it?
The following example makes use of data-section attribute which has the selector for the element that must be shown when the checkbox is checked. It is worth mentioning that this is code is dynamic and does not require changing the code when adding more inputs with divs.
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
.showhide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br>
<input type="radio" name="one" data-section="#div-2" value="02">Female<br>
<div id="div-1" class="showhide">
show me when 01 is checked.
</div>
<div id="div-2" class="showhide">
show me when 02 is checked.
</div>

jQuery else clause not working [duplicate]

I have 3 radio buttons in my web page, like below:
<label for="theme-grey">
<input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
<input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
<input type="radio" id="theme-green" name="theme" value="green" />Green</label>
In jQuery, I want to get the value of the selected radio button when any of these three are clicked. In jQuery we have id (#) and class (.) selectors, but what if I want to find a radio button by its name, as below?
$("<radiobutton name attribute>").click(function(){});
Please tell me how to solve this problem.

This should do it, all of this is in the documentation, which has a very similar example to this:
$("input[type='radio'][name='theme']").click(function() {
var value = $(this).val();
});
I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.

To determine which radio button is checked, try this:
$('input:radio[name=theme]').click(function() {
var val = $('input:radio[name=theme]:checked').val();
});
The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val.
Update: After posting I decided that Paolo's answer above is better, since it uses one less DOM traversal. I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible.

$('input:radio[name=theme]:checked').val();

another way
$('input:radio[name=theme]').filter(":checked").val()

This works great for me. For example you have two radio buttons with the same "name", and you just wanted to get the value of the checked one. You may try this one.
$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

The following code is used to get the selected radio button value by name
jQuery("input:radio[name=theme]:checked").val();
Thanks
Adnan

For anyone who doesn't want to include a library to do something really simple:
document.querySelector('[name="theme"]:checked').value;
jsfiddle
For a performance overview of the current answers check here

I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.
With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.
To do the above now just replace the :radio with [type=radio].
So your answer now becomes for all versions of jQuery 1.8 and above:
$("input[type=radio][name=theme]").click(function() {
var value = $(this).val();
});
You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.

If you'd like to know the value of the default selected radio button before a click event, try this:
alert($("input:radio:checked").val());

You can use filter function if you have more than one radio group on the page, as below
$('input[type=radio]').change(function(){
var value = $(this).filter(':checked' ).val();
alert(value);
});
Here is fiddle url
http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help">
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">
<input type="radio" name="ans2" value="test">
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">
<script type="text/javascript">
var ans3 = jq("input[name='ans3']:checked").val()
var ans2 = jq("input[name='ans2']:checked").val()
</script>

If you want a true/false value, use this:
$("input:radio[name=theme]").is(":checked")

Something like this maybe?
$("input:radio[name=theme]").click(function() {
...
});
When you click on any radio button, I believe it will end up selected, so this is going to be called for the selected radio button.

I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button:
$("input:radio[type=radio]").click(function() {
var value = $(this).val();
alert(value);
});
Cheers!

can also use a CSS class to define the range of radio buttons and then use the following to determine the value
$('.radio_check:checked').val()

This worked for me..
HTML:
<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>
Jquery:
$(".radioClass").each(function() {
if($(this).is(':checked'))
alert($(this).val());
});
Hope it helps..

$('input:radio[name=theme]').bind(
'click',
function(){
$(this).val();
});

You might notice using class selector to get value of ASP.NET RadioButton controls is always empty and here is the reason.
You create RadioButton control in ASP.NET as below:
<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />
And ASP.NET renders following HTML for your RadioButton
<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>
For ASP.NET we don't want to use RadioButton control name or id because they can change for any reason out of user's hand (change in container name, form name, usercontrol name, ...) as you can see in code above.
The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following
$('span.radios input:radio').click(function() {
var value = $(this).val();
});

How to disable a textbox if particular radio button is clicked using jquery?

I have a html form in which I have four radio buttons and one text box. What I am trying to do is - Once I click Test4 radio button, I want to disable node textbox so that nobody can type anything in that. I don't want to hide it, I just want to disable it.
But if anybody clicks either Test1 or Test2 or Test3 then anybody can type anything into it.
Here is my jsfiddle
Is this possible to do using jquery?

Yes, this is possible; I'd suggest:
$('input[type="radio"]').change(function(){
$('#node').prop('disabled', this.value === 'test4');
});
JS Fiddle demo.
This sets the disabled property of the #node element to true (if the changed-element has the value of 'test4'), and to false if it does not.
Further to the discussion in comments (wherein, basically, the OP revealed that checking other input elements of type="radio" caused the #node element to become re-enabled), I've amended the HTML to offer a simple means of associating the appropriate inputs with the specific text-input, using data-affects. giving the following HTML:
<input type="radio" name="data" id="test1" value="test1" data-affects="nodes" />Test1
<input type="radio" name="data" id="test2" value="test2" data-affects="nodes" />Test2
<input type="radio" name="data" id="test3" value="test3" data-affects="nodes" />Test3
<input type="radio" name="data" id="test4" value="test4" data-affects="nodes" />Test4
Coupled with the amended jQuery:
$('input[type="radio"][data-affects]').change(function(){
$('#' + this.getAttribute('data-affects')).prop('disabled', this.value === 'test4');
});
JS Fiddle demo.
References:
change().
prop().

To your jsfiddle, add on the top of js this piece of code:
$("input:radio[name=data]").change(function () {
var checkedValue = $(this).val();
if (checkedValue == "test4") {
$("#node").prop("disabled", true);
} else {
$("#node").prop("disabled", false);
}
});
You can also call the radio group by id instead of name:
$("input:radio[id=data]").change(function () { //first line of code
Live example here: http://jsfiddle.net/pw9nZ/
Hope this helps you...
Theo.

How to find specific ID with Jquery and perform action

I have 2 styles radio buttons with Enable / Disable, please check below..
<p class="switch-options">
<label class="cb-enable selected" data-id="company_slogan_check">
<span>Enable</span>
</label>
<label class="cb-disable" data-id="company_slogan_check">
<span>Disable</span>
</label>
<input id="company_slogan_check" class="checkbox" type="hidden" value="0" name="company_slogan_check">
<input id="company_slogan_check" class="checkbox main_checkbox" type="checkbox" value="1" name="company_slogan_check" checked="checked">
</p>
and I want to check if the "Enable" button is clicked I want to hide some DIV within the code. I am trying with the following code but nothing works..
jQuery('#company_slogan_check').click(function() {
alert('sssss');
});
it doesnt even respond to the click.. can someone please help..

data-id is not the same as an id, to which the css selector #something would apply to id="something".
It would be easier to use .switch-options input

thanks guys, I did another workaround.. cheers
if($(this).attr('data-id') == "company_slogan_check")
alert('clicked');

first of all ID's need to be unique as already mentioned..
second your not using radio buttons u use a checkbox..
and way not try the ":checked" ?
something like this:
$("#company_slogan_check").change(function(){
if($(this).is(':checked')){
// your function
}
});
hope this was helpful

best way to get a callback when a radiobutton is clicked in javascript

I have HTML like this:
<input type="radio" name="v" value="1"> 1<br>
<input type="radio" name="v" value="2"> 2<br>
<input type="radio" name="v" value="3" checked> 3<br>
I want to know how to monitor all of those radio buttons. I could have many more than 3.
One thing I considered is to have an onclick function for all of them. Is that the right way, or is there a neater way to register a common javascript function when the radio button set has changed?

In addition to Markandey's comment: if you are using jquery, you can use attribute selectors instead of classnames without too much hassle so that you have minimal code.
$("input[name=v]").click(mycallback);
In the mycallback function, 'this' will refer to the element that was clicked.
e.g.
mycallback = function(){
alert($(this).val());
};
Putting an onclick attribute on each element creates a maintenance headache. It also prevents you from treating HTML and JavaScript as separate layers - a data layer and a behaviour layer - in the same way that CSS is your presentation layer.
Listening for events is a more mature way of developing JavaScript. Initially it takes a bit of getting used to (as it is no longer obvious from the element alone that some functionality will get triggered when you click on it) but you soon find your way around that by organising and commenting your code better.
Edited because I saw I hadn't turned the 'this' into a jquery object, and when you are in the callback 'this' is the native DOM object so .val() wouldn't work.

<input class="someclass" type="radio" name="v" value="1"> 1<br>
<input class="someclass" type="radio" name="v" value="2"> 2<br>
<input class="someclass" type="radio" name="v" value="3" checked> 3<br>
function yourcallback()
{
}
$('.someclass").click(yourcallabck);
This the way you can do using jquery

You can add an event listener to the parent of these elements. Events bubble up the DOM tree so you only need to attach one handler.
See an example here: http://jsfiddle.net/cLzBV/3/

How do I register a javascript event handler to an element that hasn't been added to the page yet...
This is a similar post with good solution how to have an 'onclick' function for all of them.
And next code I see useful for you:
document.onclick = myRadioButtonOnClickHandler;
function myRadioButtonOnClickHandler(e) {
var realTarget = e ? e.target : window.event.srcElement;
if (realTarget.nodeName.toLowerCase() === 'input' && realTarget.type === 'radio' ) {
doSomething();
}
}
Hope it helpful.

You can use Jquery add class to every radio such as "RadioClass" add jquery file to your page and use the code below...
$(document).ready(function() {
$('.RadioClass').click(function () {
alert($(this).val());
});
});

Categories