0

代码如下：

<label>radio 1 </label>
<input type="radio" onchange="$('input2').show()" id="radio1" name="RadioGroup">
<label>radio 2 </label>
<input type="radio" onchange="$('input2').show()" id="radio2" name="RadioGroup">
<label>radio 3 </label>
<input type="radio" onchange="$('input2').hide()" id="radio3" name="RadioGroup">

<input type="text" id="input2">

这些代码可能有两个缺点：

  1. 的 jquery 代码onchange必须写三遍
  2. 只有当我单击/更改其中一个onchange时才会执行代码。换句话说，这些代码在页面初始化时不会被执行。例如，如果在页面初始化时正在检查 ，仍然会显示 ..radioradio3input2
4

3 回答 3

1

我做了一个快速的 jsfiddle 来重新组织一下。

1）为显示输入的任何单选按钮分配一个类 2）为隐藏输入的任何单选按钮分配另一个类 3）在管理操作的单独 js 文件中的 jQuery document.ready 中附加一个事件。

小提琴：http: //jsfiddle.net/Kw4gu/2/

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>radio 1 </label>
<input type="radio" class="open" name="radioGroup" id="radio1">
<label>radio 2 </label>
<input type="radio" class="open" name="radioGroup"   id="radio2">
<label>radio 3 </label>
<input type="radio" class="close" name="radioGroup"   id="radio3">

<input type="text" id="input2">

​JS

$(document).ready(function() {
    $(".open").on("change", function(event) {

        $('#input2').show();
    });

    $(".close").on("change", function(event) {

        $('#input2').hide();
    });
});​
于 2012-11-19T03:51:00.210 回答
0

您可以做的一件事是通过 Javascript 设置事件处理程序，而不是像那样将它们捆绑在 HTML 中。使用 jquery 选择器选择单选按钮，然后在一个地方添加事件。

通过 Javascript 做事还可以让您在何时初始化代码、如何运行等方面更加灵活。

于 2012-11-19T03:15:29.063 回答
0

您可以通过几种不同的方式来执行此操作，但在 jQuery 中它相当简单。我已经稍微更新了您的 HTML（为两个相似的按钮提供了一个通用类以便于选择，并且我为所有按钮提供了相同的名称，因此它们属于同一个按钮组）。

<label>radio 1 </label>
<input type="radio" class="radioButton" id="radio1" name="buttonGroup">
<label>radio 2 </label>
<input type="radio" class="radioButton" id="radio2" name="buttonGroup">
<label>radio 3 </label>
<input type="radio" id="radio3" name="buttonGroup">

<input type="text" id="input2">​

现在，您必须编写选择器以根据选择的按钮隐藏或显示该字段。此处显示：

$(function() {
    $('#input2').hide();

    $('.radioButton').on('change', function() {
        $('#input2').show();
    });
    $('#radio3').on('change', function() {
        $('#input2').hide();
    });
});​

注意，我一开始$('#input2').hide();只是为了隐藏它，但我通常会在 CSS 中做类似的事情。

在任何情况下，您都可以在这个 jsFiddle 示例中看到一个这样的示例。

于 2012-11-19T04:02:44.380 回答