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

Posted 2023-04-18

【中文标题】选择 A 单选按钮以在 jquery/javascript 中添加另一个输入

【英文标题】：Selecting A radio buttons to add another input in jquery/javascript

【发布时间】：2016-11-25 11:14:42

【问题描述】：

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

我有两个按钮，一个是“是”，一个是“否”。一旦选择了“是”单选按钮，就会出现一个新的文本输入。

下面是我的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(); 放入警报中，以确保已捕获附加到“是”单选按钮的值。但是，当我将 .val() 函数放在变量中并在条件语句中使用它时，它不起作用。

我是否正确设置了 Jquery？

【问题讨论】：

“我是否正确设置了 Jquery” ... 按键盘上的 F12 并查看 console。将通过阅读错误消息立即回答该问题。

我按 F12 并查看控制台。我看到一个很大的空白区域。

应该看到红色错误消息，假设此代码实际上在您的页面中和脚本标记内

为了让“IsChecked”变量接收到一个值，你的函数必须“返回”一个值，我不确定更改事件是否支持这一点。请参阅我的回答，因为在 on change 事件中执行更改对我来说更有意义

@user3845646 它确实已经具有价值，那就是 jQuery 对象。

【参考方案1】：

试试这样的

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

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

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

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

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

【讨论】：

使用简单的 jQuery 函数就可以实现这一点。让我知道它是否适合你

【参考方案2】：

你有点跑题了。您不需要命名您的 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();
    
  );
);

【讨论】：

所以通过将 onChange 处理程序放入变量中，使“yes”值未定义？

@hnewbie 我不确定我是否理解你的问题。能改一下吗？

通过将$("input[name=question]:checked", "#dform").val(); 放入我设置的变量isChecked 中，是否使通过.val() 函数捕获的值未定义？

@hnewbie 如果你这样做了var isChecked = $('#dform input[name=question]:checked').val();，那就太好了。不过，您的原始代码有var isChecked = $("#dform input" ).change(function() ...。后来您尝试引用isChecked，但该变量仅分配给您的处理程序，而不是您要查找的实际结果。

【参考方案3】：

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

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

【参考方案4】：

使用 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/

【参考方案5】：

请用这个替换你的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

【讨论】：

为什么 yes 是未定义的？

@hnewbie 你是对的！我的原件没有包含 ":checked" 属性，因此在页面加载时该值将是未定义的。让我编辑一下！