Hide and show another element onclick of a radio button, based on value

Question

I have 4 jquery radio buttons in my form something like this

<form:radiobutton path="lcmoption" name ="lcmoptions" id ="lock" value="lock" checked="checked"/>
<fmt:message key="lcm.form.options.lock" />&nbsp;

<form:radiobutton path="lcmoption" name ="lcmoptions" id="unlock" value= "unlock"/>
<fmt:message key="lcm.form.options.unlock" /> &nbsp;

<form:radiobutton path="lcmoption" name ="lcmoptions" id="terminate" value="terminate" />
<fmt:message key="lcm.form.options.terminate" /> &nbsp;

<form:radiobutton path="lcmoption" name ="lcmoptions" id="wipe" value="wipe" />
<fmt:message key="lcm.form.options.wipe" /> &nbsp;

<form:radiobutton path="lcmoption" name ="lcmoptions" id="other" value="other" />
<fmt:message key="lcm.form.options.other" /> &nbsp;

onclick of the first four radio buttons I am dynamically loading the select box using an AJAX call. When the user clicks the last option, i.e, other, I need to hide the textbox and show a text area.

I tried using:

$("input:radio[name=lcmoption]").click(function() {
    if(type=="other")
    {
        $([name="reasonsList"]).css("display",none");
        $([name="otherreasonsList"]).css("display", "block");
    }
    else
    {
        // AJAX CALL to load dropdown (for other options)
    }
}

But this did not work. I also tried:

$([name="reasonsList"]).hide();
$([name="otherreasonsList"]).show();

This shows both the dropdown and text area. Can anyone help me on hiding reasonsList div and show otherreasonsList div onclick of a radio button with other value?

Answer 1

There's all kinds of syntax errors in the code you posted.

For instance, you need to quote your selector strings as text, and an attribute value in an attribute selector ([name=something]) can be either an unquoted single word or a quoted string.

In this case, just leave it out:

$('[name=reasonsList]').show();

Also, instead of $.click(), I would use $.change(), which will detect when the radio value has changed.

$("input:radio[name=lcmoptions]").change(function(){...});

See notes in comments:

// First line looks ok, but I would use a .change() handler
// Also, I just noticed you're:
//     "input:radio[name=lcmoption]"
//
// But shouldn't it be:
//     "input:radio[name=lcmoptions]"
//
// See lcmoptions vs lcmoption (no s on second); it's lcmoptions
// in your template code. I don't know what path="lcmoption" means,
// but I think name="lcmoptions" is what you need to use to select.
$("input:radio[name=lcmoption]").click(function() {
    // What is type? I think you mean this.value or $(this).val()
    // Don't forget to lowercase the comparison, so other matches
    // Other.
    if (this.value.toLowerCase() == "other")
    {
        // The selector needs to be quoted as a string, ie:
        //     '[name="reasonsList"]'
        //
        // Also, jQuery has a shortcut method, $(sel).hide();
        $([name="reasonsList"]).hide();

        // The same thing here, you need to quote that string or 
        // alternatively, since it's a single word, leave the quotes
        // out of the selector, ie:
        //     $('[name=otherreasonsList]')
        //
        // Again, jQuery has a shortcut method, $(sel).show();
        $('[name=otherreasonsList]').show();
    }
// Don't know if you missed this in the example, but you need });
// to close the $.click() function.
});

And your second attempt:

// Same problem as above, you need to quote the string for the
// selector, ie:
//     $('[name=reasonsList]')
//
// With inner quotes, but here they're unnecessary.
$('[name="reasonsList"]').hide();
//
// Without inner quotes on name value
$('[name=otherreasonsList]').show();

For what you're wanting to do, you can:

$(document).ready(function(){
    // This is called caching, which is a good practice to get
    // get into, as unless you need to requery due to dynamic
    // changes, selecting them only once and reusing will give
    // you better performance.
    var $lcmoptions = $('input:radio[name=lcmoptions]'),
        $textbox = $('[name=textbox]'),
        $textarea = $('[name=textarea]');

    $lcmoptions.change(function(){
        // Note I this.value.toLowerCase() the comparison value
        if (this.value.toLowerCase() === 'other') {
            $textbox.hide();
            $textarea.val($textbox.val()).show();
        } else {
            $textarea.hide();
            $textbox.val($textarea.val()).show();
        }
    });
});

For more information on caching, see:

Does using $this instead of $(this) provide a performance enhancement?

This is assuming your client-side markup looks something like:

<input type="radio" name="lcmoptions" id="unlock" value= "lock"/> Lock &nbsp;
<input type="radio" name="lcmoptions" id="unlock" value= "unlock"/> Unlock &nbsp;
<input type="radio" name="lcmoptions" id="terminate" value="terminate" /> Terminate &nbsp;
<input type="radio" name="lcmoptions" id="wipe" value="wipe" /> Wipe &nbsp;
<input type="radio" name="lcmoptions" id="other" value="other" /> Other &nbsp;
<div>
Enter text:
    <input type="text" name="textbox" value="test text stuff"/>
    <textarea name="textarea"></textarea>
</div>

http://jsfiddle.net/LthAs/

Answer 2

try this, u can put this on change event or click event.

if ($("radio[@name='lcmoptions']:checked").val() == 'other')
            $("#otherreasonsList").show();

Answer 3

Have tried this mine working fine

if(document.getElementById('other').checked==true) {

            $("#txtboxID").hide(350);
            $("#txtareaid").show(350);

}