如何在单选按钮单击事件上隐藏/显示输入框答案

【问题标题】：how to hide/ show input box on radio button click event如何在单选按钮单击事件上隐藏/显示输入框
【发布时间】：2013-03-16 08:20:47
【问题描述】：

我想在我的 HTML 是单选按钮单击事件上隐藏和显示输入字段

<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>  
<input type="radio" id="xyz" name="xyz1" checked = "checked"  value="Fresher" />
<label>Fresher</label>  
<input type="text"  name="cardno" id="tyx" /><br />
<p > Number</p>

我想要的是当单击带有value="Fresher" 的单选按钮时，输入框name="cardno" 应该被隐藏。

我试图通过使用 jQuery 来解决这个问题，但它不起作用。

$(document).ready(function () {
    $("input[name$='abc1']").click(function () {
        var value = $(this).val();
        if (value == 'Experianced') {
            $("#tyx").show();
        } else if (value == 'Fresher') {
            $("#tyx").hide();
        }
    });

谁能帮我解决这个问题？

【问题讨论】：

标签： php javascript jquery html

【解决方案1】：

您的单选按钮的名称应该与检查点击事件或制作单选按钮的数组名称相同

如下代码

<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>  
<input type="radio" id="xyz" name="abc1" checked = "checked"  value="Fresher" />
<label>Fresher</label>  
<input type="text"  name="cardno" id="tyx" /><br />
<p > Number</p>

然后创建类似

的函数

$(document).ready(function () {
$("input[name$='abc1']").click(function () {
    var value = $(this).val();
    if (value == 'Experianced') {
        $("#tyx").show();
    } else if (value == 'Fresher') {
        $("#tyx").hide();
    }
});

如果我能帮助你更多请回复..

【讨论】：

【解决方案2】：

将拼写改为Experienced

你用过

if (value == 'Experianced')

【讨论】：

【解决方案3】：

除了 Experienced 中的错字，尝试为每个单选按钮设置一个点击事件：

 $(document).ready(function() {
   $('input[name="abc1"][value="Experienced"]').click(function() {
     $("#tyx").show();
   });
   $('input[name="xyz1"][value="Fresher"]').click(function() {
     $("#tyx").hide();
   });
 });

注意：

您可以简化选择器以使用 id：

$('#abc')

和

$('#xyz')

【讨论】：

【解决方案4】：

修复：

$(document).ready(function () {
  $("input[type='radio']").click(function () {
    var value = $(this).val();
    if (value == 'Experianced') {
        $("#tyx").show();
    } else if (value == 'Fresher') {
        $("#tyx").hide();
    }
  });
});

【讨论】：

【解决方案5】：

HTML：

<input type="radio" id="abc" name="jobtype" checked = "checked" value="Experienced" />
<label> Experienced </label>  
<input type="radio" id="xyz" name="jobtype" checked = "checked"  value="Fresher" />
<label>Fresher</label>  
<input type="text"  name="cardno" id="tyx" /><br />
<p > Number</p>

同组的单选按钮应该有相同的name

Js：

$(document).ready(function () {
   $("input[name='jobtype']").click(function () {
      var value = this.value;
      if (value == 'Experienced') {
        $("#tyx").show();
      } 
     else{
        $("#tyx").hide();
      }
   });
});

【讨论】：