选择单选按钮时清除输入答案

【问题标题】：Clear input when selecting radio button选择单选按钮时清除输入
【发布时间】：2018-09-11 04:51:43
【问题描述】：

我有两个单选按钮来添加和删除一个 div（参见代码 sn-p）

现在，当您从一个按钮更改为另一个按钮时，我需要清除输入文本。

例如，如果您选择“一”并输入“名称”，当您选择“二”时，输入文本应重置为空白（反之亦然）

我该怎么做？

$(function(){

  let content=[
    '<div class="added"> HELLO </div>',
    '<div class="added"> BYE </div>'
  ];
  let toggled=0;
    
$("[name='something']").on('change', function(){
    $(".added").remove();
    toggled=(toggled+1)%2;
    $(".toadd").append(content[toggled])
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  
  <label>One</label><input type="radio" class="first" name="something" checked />
  <label>Two</label><input type="radio" class="second" name="something" />
  
  <input type='text' class='toclear'>
  
  <div class="added"> HELLO </div>
  
</div>

【问题讨论】：

标签： input radio-button append toggle

【解决方案1】：

使用.val('') 可以将输入设为空白：

$(function(){

  let content=[
    '<div class="added"> HELLO </div>',
    '<div class="added"> BYE </div>'
  ];
  let toggled=0;
    
$("[name='something']").on('change', function(){
    $(".added").remove();
    toggled=(toggled+1)%2;
    $(".toadd").append(content[toggled])
    $(".toclear").val('');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  
  <label>One</label><input type="radio" class="first" name="something" checked />
  <label>Two</label><input type="radio" class="second" name="something" />
  
  <input type='text' class='toclear'>
  
  <div class="added"> HELLO </div>
  
</div>

【讨论】：