基于单选按钮选择的jquery切换div

我在调查表单上有一个单选按钮组，其html如下所示：

<label>Would you like to compete?</label>
      <input type="radio"  name="compete" value="2" id="competenoradio" >
      <label for="compete_no">No</label>
      <input type="radio" name="compete" value="1" id="competeyesradio">
      <label for="compete_yes">Yes</label>
      <div id="competeyes">
        <label class="competeyestxt" hidden=true>Which Location?</label>
        <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt" hidden="true">
        </textarea>
      </div>

The div at the bottom with id 'competeyes' need to be toggled between invisible to visible
 based on whether the user selected radio button with id 'compete_yes'.

---

有什么建议吗？

您的第一个问题是您正在使用

$（this）.is（“：checked”）

检查当前元素是否已选中。这永远是真的

$("#competenoradio[checked]")( 
    function() { 
      $('#competeyes').toggle();
    } 
);

$('input[name="compete"]').bind('change',function(){
    var showOrHide = ($(this).val() == 1) ? true : false;
    $('#competeyes').toggle(showOrHide);
 });

第二个问题是您对字段使用了

hidden=“true”

。您应该使用CSS来隐藏字段。以下是您应该使用的HTML标记：

<label>Would you like to compete?</label>

<input type="radio"  name="compete" value="2" id="competenoradio" >
<label for="compete_no">No</label>

<input type="radio" name="compete" value="1" id="competeyesradio">
<label for="compete_yes">Yes</label>

<div id="competeyes" style="display:none">
    <label class="competeyestxt">Which Location?</label>
    <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt"></textarea>
</div>

您想参加比赛吗？
不
对
哪个位置？

---

}

切换功能正常时，为什么要验证它？最多，它会给你回电话。你应该试试这个：

---

$（“#是”）.toggle（）
您可以执行类似于找到的内容的操作

您可以尝试，尽管不是免费的解决方案

披露：我是开发者
 @Qtax:这样就可以了，但我不想让OP对代码感到惊讶。在目前的情况下，$（这个）是什么？我假设在语句$（'#competyes'）.toggle（$（this）.is（':checked'）；}）中$（这）将是#是的。否？@truthSeekr:
$（此）
将引用选中的单选按钮，如果选择了
No
，则值将为2。但是，如果选择“是”，则值将为
1
，这正是我们使用
（$（this）.val（）==1）查找的值？真：假。垃圾答案！第一，你只是在为顾客钓鱼。第二，用户希望根据选中的单选按钮切换元素，而不是像您提供的那样禁用/启用。第三，你到底为什么要为只需要几行简单代码的东西买插件？！！第四，如果这个链接变得不活跃，这个答案就没用了。
<label>Would you like to compete?</label>

<input type="radio"  name="compete" value="2" id="competenoradio" >
<label for="compete_no">No</label>

<input type="radio" name="compete" value="1" id="competeyesradio">
<label for="compete_yes">Yes</label>

<div id="competeyes" style="display:none">
    <label class="competeyestxt">Which Location?</label>
    <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt"></textarea>
</div>

$('input[id=competeyesradio]:checked')(function(){ $('#competeyes').toggle();

$('input:radio').bind('change',function(){
    $('#competeyes').toggle($(this).attr('id') == 'competeyesradio');
});