选中 InPut radio 时显示文本区域

Question

我需要在选中我的输入收音机时显示一个文本区域，但我的 div 没有出现。当我的输入收音机被选中但我的 div 没有出现时，我需要显示一个文本区域。

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

Answer 1

您的两个单选选项的值为 'OContenuPP'，因此 if 子句

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

永远为真，因此 div 不会消失。

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

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

value="NContenuPP"

祝你好运！

Answer 2

删除最后一个 });。不需要。

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

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

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

});

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

Answer 3

请注意，您在两个无线电中使用相同的值。

使用以下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();
    }
  })
});

Answer 4

问题

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

解决方案

将第二个input的value改为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();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></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="NContenuPP" /> Non
    </label>
  </div>
</div>
<div class="form-group" id="divTAchoixContenuPP">
  <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>

选中 InPut radio 时显示文本区域

Display textarea when InOut radio is checked

html

javascript

textarea

工作代码段