javascript - 在 Radio Select 上，显示不同的复选框选择

Question

我正在寻找 Javascript 或 jQuery 解决方案，两者都可以。

无论如何，当用户为单选按钮选择一个选项时，我希望显示一组不同的复选框。因此，如果用户选择按名称，名称复选框将显示。然后，当用户选择按标题时，名称复选框将消失，标题复选框将显示。

当页面加载且未选择选项时，不应出现复选框

这是 HTML 的样子:

<table>
    <tr>
        <td><input type="radio" name="selectType" value="byName" />By Name</td>
        <td><input type="radio" name="selectType" value="byTitle" />By Title</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectName1" />Name 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectName1" />Name 2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectTitle1" />Title 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectTitle2" />Title 2</td>
    </tr>
</table>

这段代码会是什么样子？

Answer 1

我会使用数据属性来引用复选框组。这样您就可以使您的代码真正灵活且不引人注目:

$('.type-check').change(function() {
    $('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});

HTML 示例:

<tr>
    <td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
    <td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>

http://jsfiddle.net/D8s9G/