Menu
I need to register a handler for a group of radio buttons. I'm using JQuery and hoped that its .change method would accomplish this. However I have not experienced the desired behavoir.
Here is a sample snippet I've written. Sadly, the "radioValueChanged" is only called on the initial load. Selecting either true / false does not trigger the handler.
<html> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <form id="myForm"> <div id="Question1Wrapper"> <div> <input type="radio" name="controlQuestion" id="valueFalse" value="0" /> <label for="valueFalse"> False</label> </div> <div> <input type="radio" name="controlQuestion" id="valueTrue" value="1" /> <label for="valueTrue"> True</label> </div> </div> <div id="Question2Wrapper"> <div> <label for="optionalTextBox"> This is only visible when the above is true</label> <input type="text" name="optionalTextBox" id="optionalTextBox" value="" /> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { $("#controlQuestion").change(radioValueChanged('controlQuestion')); }) function radioValueChanged(radioName) { radioValue = $('input[name=' + radioName + ']:checked', '#myForm').val(); alert(radioValue); if(radioValue == 'undefined' || radioValue == "0") { $('#Question2Wrapper:visible').hide(); } else { $('#Question2Wrapper:visible').show(); } } </script> </form> 
362
Now, to detect when that radio box is changed, you can easily call the jQuery 'change' event inside your jQuery document ready function: $(document). ready(function(){ $('#my_radio_box'). change(function(){ alert('Radio Box has been changed!
To check which radio button is selected in a form, we first get the desired input group with the type of input as an option and then the value of this selection can then be accessed by the val() method. This returns the name of the option that is currently selected.
We can check the status of a radio button by using the :checked jQuery selector together with the jQuery function is . For example: $('#el').is(':checked') . It is exactly the same method we use to check when a checkbox is checked using jQuery.
There are a few issues here.
You are immediately running radioValueChanged('controlQuestion') upon script execution because that is a method call and not a function assignment.
The selector $("#controlQuestion") is wrong, you don't have any elements with id of controlQuestion.
The radioValueChanged method is not properly handling values as they would be passed to a jQuery event handler.
You could try something like the following:
jQuery(document).ready(function () { $("input[name='controlQuestion']").change(radioValueChanged); }) function radioValueChanged() { radioValue = $(this).val(); alert(radioValue); if($(this).is(":checked") && radioValue == "0") { $('#Question2Wrapper').hide(); } else { $('#Question2Wrapper').show(); } } In all honesty I'm not sure if that is the actual logic you are looking for with the if statement, but hopefully this will provide a basis for you to correct the current code.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
