隐藏和显示其他元素的onclick单选按钮的，基于价值

我有4个jQuery的单选按钮在我的形式是这样的隐藏和显示其他元素的onclick单选按钮的，基于价值

<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股利和显示otherreasonsListdivonclick的单选按钮与其他值？

来源

2012-03-07 Poppy

您是否正确粘贴你的代码？不应该是'$（“input：radio [name = lcmoptions]”）'即name属性应该与'lcmoptions'而不是'lcmoption'匹配。并且请粘贴您的AJAX代码。 – 2012-03-07 06:29:28

写入的标记是什么？ Java Spring？ – 2012-03-07 07:04:07

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

例如，您需要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(); 
     } 
    }); 
});

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

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

来源

2012-03-07 07:16:10

感谢您的详细解答:) – Poppy 2012-03-07 12:21:34

是否尝试过这个矿山做工精细

如果（的document.getElementById（ '其他'）。检查==真）{

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

}

来源

2012-03-07 06:39:50

试试这个，U可以把这个改变事件或点击事件。

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

来源

2012-03-07 07:00:14

隐藏和显示其他元素的onclick单选按钮的，基于价值

回答

相关问题