选择 A 单选按钮以在 jquery/javascript 中添加另一个输入

Question

我正在尝试通过将所学付诸实践来学习 jQuery。所以，这是我的编码问题。

我有两个按钮，一个 "yes" 和一个 "no"。选择 "Yes" 单选按钮后，将出现新的文本输入。

我的 jquery 下面：

$(document).ready(function(){ 
    $("#many").hide();
var isChecked = $("#dform input" ).change(function() {
    $("input[name=question]:checked", "#dform").val();  
  if(isChecked == yes){
    $("#many").show();
  }else {$("#many").hide();}
   });
});

我的code-pen

我用这个 answer 在变量中添加值函数，然后在条件语句中使用它。我将值 $("input[name=question]:checked", "#dform").val(); 放在警报中，以确保已捕获附加到 "yes" 单选按钮的值。但是，当我将 .val() 函数放在变量中并在条件语句中使用它时，它不起作用。

我是否正确设置了 Jquery？

Answer 1

请将您的 js 替换为：

$(document).ready(function(){ 
    $("#many").hide();
    $("#dform input" ).change(function() {
    var val = $("input[name=question]:checked", "#dform").val();  
     if (val == "yes") {
       $("#many").show();
     } else {
       $("#many").hide();
     }
   });
});

我确定它可以进一步清理，但它仍然可以正常工作。 jQuery 设置没问题。码笔：http://codepen.io/anon/pen/GqxGmp

Answer 2

尝试这样的事情

<script>
$(document).ready(function () {

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

    $("input[name='question']").click(function () {

        if ($('#yes').is(':checked')) { $("#many").show(); } 

        else { $("#many").hide(); }
    });
});
</script>

Answer 3

你有点跑题了。您不需要命名您的 onChange 处理程序 (var isChecked...)，我认为这让您感到困惑。我会尝试更多类似的东西：

$(document).ready(function(){ 
  $("#many").hide();
  $("#dform input[name=question]").change(function() {
    if ($('#dform input[name=question]:checked').attr('value') == 'yes') {
      $("#many").show();
    } else {
      $("#many").hide();
    }
  });
});

Answer 4

试试这个来隐藏和显示元素

$(document).ready(function(){ 
$("#many").hide();
 $("#dform input" ).change(function() {
     $("#many").show();
  });
  $("#no").change(function(){
    $("#many").hide();
  })
});

将html更改为：

<input type="radio" name="question" id="no" value="no" checked>

Answer 5

有不同的方法可以做到这一点，简单的方法是使用 Jquery addClass 和 Remove Class 方法

**HTML**
<h4>
Click on button to toggle
</h4>
<div style="padding:10px;">
<button class="show btn">Show</button>
<button class="hide btn">Hide</button>

</div>
<div>
<input type="text" id="name" class="displayN"/>
</div>

Jquery

$(document).ready(function(){

$(".show").click(function(){
    $("#name").addClass('displayB').removeClass("displayN");
});

$(".hide").click(function(){
    $("#name").addClass("displayN").removeClass("displayB");
})

});

工作示例： https://jsfiddle.net/mshyam83/u3wfpznn/

选择 A 单选按钮以在 jquery/javascript 中添加另一个输入

Selecting A radio buttons to add another input in jquery/javascript

html

javascript

jquery

textinput

radio-button