Question

如何用Jquery控制单选按钮点击否然后隐藏其他文本框

Answer 1

思路：在设计HTML结构时，将单选按钮和对应的文本框关联（例如单选按钮的value值对应了文本框的位置）。然后在单选按钮的的单击事件处理函数中，隐藏相应的文本框。实例演示如下:

1、HTML结构：注意单选框的value值是和文本框在div中的位置对应的

<input type="radio" name="test" value="0" checked>第一组

<input type="radio" name="test" value="1">第二组

<div id="test">

    <div>第一组文本框：<input type="text"/></div>

    <div>第二组文本框：<input type="text"/><input type="text"/></div>

</div>

2、jquery代码

$("#test div:last").hide(); // 先隐藏第二组文本框

$(":radio").click(function() {

    var num = $(this).val();  // 当前按钮的value值对应需要显示文本框的位置

    $("#test div").hide();    // 先隐藏所有文本框

    $("#test div").eq(num).show(); // 然后显示对应的文本框

});

3、效果演示