Question

我的表单中有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并显示带有其他值的单选按钮的otherreasonsList div onclick吗？

Answer 1

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

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

在这种情况下，请将其删除：

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

此外，我会使用$.click()代替$.change()，这将检测无线电值何时发生变化。

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

参见评论中的注释：

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

有关缓存的更多信息，请参阅：

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

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

<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

试过这个矿井工作正常

如果（的document.getElementById（ '其它'）。检查== TRUE） {

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

}

Answer 3

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

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

根据值隐藏并显示单选按钮上的另一个元素

3 个答案: