Question

代码如下：

<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">

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

onchange的jquery代码必须写三次
onchange代码仅在我点击/更改 radio之一时执行。换句话说，当页面初始化时，这些代码将不执行。例如，如果在初始化页面时检查radio3，则仍会显示input2 ..

Answer 1

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

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

小提琴：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();
    });
});

Answer 2

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

通过Javascript进行操作还可以让您更灵活地初始化代码，运行方式等等。

Answer 3

你可以通过几种不同的方式实现这一点，但在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中做类似的事情。

在任何情况下，您都可以在this jsFiddle example上看到此示例。

如何在jquery代码中重构这些回调？

3 个答案: