选中InOut无线电时显示textarea

时间:2016-01-11 10:18:46

标签: javascript html textarea

当我的输入广播被选中但我的div没有出现时,我需要显示一个textarea。当我的输入收音机被检查但我的div没有出现时,我需要显示一个textarea。

<script>
    $("#divTAchoixContenuPP").hide();
    $("input:radio[name='choixContenuPP']").change(function(){  
        if(this.value == 'OContenuPP' && this.checked){
            $("#divTAchoixContenuPP").show();
        }else{
            $("#divTAchoixContenuPP").hide();
        }
    });
    });
</script>

<div class="form-group">
    <label for="" class="col-sm-7 control-label">Le contenu du poste de travail a-t-il évolué depuis le dernier entretien professionnel ?</label>
    <div class="col-sm-5">
        <label class="radio-inline">
            <input type="radio" name="choixContenuPP" id="OContenuPP" value="OContenuPP"> Oui
        </label>
        <label class="radio-inline">
            <input type="radio" name="choixContenuPP" id="NContenuPP" value="OContenuPP"> Non
        </label>
    </div>
</div>
<div class="form-group" id="divTAchoixContenuPP" style="display:none;">
    <label for="TAchoixContenuPP" class="col-sm-2 control-label">Si oui, préciser les principaux changements </label>
    <div class="col-sm-4">
        <textarea class="form-control" name="TAchoixContenuPP" id="TAchoixContenuPP" rows="3"></textarea>
    </div>
</div>

4 个答案:

答案 0 :(得分:1)

您的两个电台选项的价值都是&#39; OContenuPP&#39;,所以if子句

if(this.value == 'OContenuPP' && this.checked){

永远是真的,因此div不会消失。

我为您修复了代码:https://jsfiddle.net/gemto31j/

我所做的只是将第二个无线电选项的值更改为

值=&#34;的Ñ ContenuPP&#34;

祝你好运!

答案 1 :(得分:0)

删除上一个});。这不是必需的。

$("#divTAchoixContenuPP").hide();

$("input:radio[name='choixContenuPP']").change(function(){  

  if(this.value == 'OContenuPP' && this.checked){
    $("#divTAchoixContenuPP").show();
  }else{
    $("#divTAchoixContenuPP").hide();
  }

});

工作示例:https://jsfiddle.net/rwpq7Lfu/1/

答案 2 :(得分:0)

请注意您在两个收音机中使用相同的值。

使用以下JS: https://jsfiddle.net/5v72Ldqq/10/

 // make sure your dom is ready
$(document).ready(function() {
  // hide your text box when page load
  $("#divTAchoixContenuPP").hide();
  // select your radio buttons
  $("input[name=choixContenuPP]:radio").change(function() {
    // if the value is checked
    if (this.checked) {
      // show textarea
      $("#divTAchoixContenuPP").show();
    } else {
      // hidetextarea
      $("#divTAchoixContenuPP").hide();
    }
  })
});

答案 3 :(得分:0)

<强>问题

您在两个输入value中都有相同的value='OContenuPP'

<强>解决方案

将第二个value的{​​{1}}更改为input

NContenuPP

希望这有帮助。

工作代码段

<input type="radio" name="choixContenuPP" id="NContenuPP" value="NContenuPP">
$("#divTAchoixContenuPP").hide();

$("input:radio[name='choixContenuPP']").change(function(){
  if(this.value == 'OContenuPP' && this.checked){
    $("#divTAchoixContenuPP").show();
  }else{
    $("#divTAchoixContenuPP").hide();
  }
});