根据值隐藏和显示另一个元素 onclick 单选按钮答案

【问题标题】：Hide and show another element onclick of a radio button, based on value根据值隐藏和显示另一个元素 onclick 单选按钮
【发布时间】：2012-03-07 06:17:27
【问题描述】：

我的表单中有 4 个 jquery 单选按钮，类似这样

<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 前四个单选按钮我正在使用 AJAX 调用动态加载选择框。当用户单击最后一个选项时，即other，我需要隐藏文本框并显示文本区域。

我尝试使用：

$("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)
    }
}

但这不起作用。我也试过：

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

这会显示下拉列表和文本区域。谁能帮我隐藏 reasonsList div 并显示具有 other 值的单选按钮的 otherreasonsList div onclick？

【问题讨论】：

您是否正确粘贴了代码？不应该是$("input:radio[name=lcmoptions]")，即名称属性应该与lcmoptions而不是lcmoption匹配。请也粘贴您的 AJAX 代码。
那个标记是用什么写的？ Java 春天？

标签： javascript jquery

【解决方案1】：

您发布的代码中存在各种语法错误。

例如，您需要将quote your selector strings 作为文本，并且属性选择器（[name=something]）中的属性值可以是unquoted single word or a quoted string。

在这种情况下，请忽略它：

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

另外，我会使用$.change()，而不是$.click()，它会检测无线电值何时发生变化。

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

见 cmets 中的注释：

// 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.
});

你的第二次尝试：

// 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();

对于你想做的事，你可以：

$(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();
        }
    });
});

这是假设您的客户端标记看起来像：

<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/

【讨论】：

感谢您的详细回答：)

【解决方案2】：

试过这个地雷工作正常

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

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

}

【讨论】：

【解决方案3】：

试试这个，你可以把它放在更改事件或点击事件上。

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

【讨论】：