jquery - 根据选定的单选按钮显示/隐藏复选框

Question

我目前正在为订单流程开发一个小表格。

该表单有多个字段，包括输入字段和单选框/复选框。

当前的形式如下：

    <form id="order_process" name="order_process" method="post" action="">
    <table>
    <tr>
       <td>
         <label for="colour">Colour</label>
      </td>
      <td>
        <label for="small">Small</label>
        <input type="radio" name="type" value="Small" />
      </td>
      <td>
        <input type="checkbox" name="colours" value="red" />
        <input type="checkbox" name="colours" value="blue" />
        <input type="checkbox" name="colours" value="yellow" />
      </td>
      <td>
        <label for="medium">Medium</label>
        <input type="radio" name="type" value="Medium" />
      </td>
      <td>
        <input type="checkbox" name="colours" value="orange" />
        <input type="checkbox" name="colours" value="blue" />
        <input type="checkbox" name="colours" value="green" />
      </td>
      <td>
        <label for="large">Large</label>
        <input type="radio" name="type" value="Large" />
      </td>
      <td>
        <input type="checkbox" name="colours" value="black" />
        <input type="checkbox" name="colours" value="white" />
        <input type="checkbox" name="colours" value="red" />
      </td>
   </tr>
   </table>
   </form>

我需要做的是，如果我选择特定的单选按钮，则仅显示颜色复选框。因此，这些复选框需要在页面加载时隐藏，并且仅根据所选的单选按钮显示。

我知道我可以使用 jQuery 来实现这一点，但我不确定如何做到这一点。

非常感谢

Answer 1

首先隐藏包含复选框的行，然后您所需要的就是：

var lastRow = null;

$(":radio[name='type']").click(function(){
    if (lastRow != null){
       lastRow.toggle();
    }
    lastRow = $(this).parent().next();
    lastRow.toggle();
});

这将显示与其关联的复选框行。它还将隐藏之前单击的其他单选按钮打开的任何行。

您可以在这里尝试一下：

http://jsfiddle.net/jXrxW/

Answer 2

使用 jQuery 有很多方法可以做到这一点，但本质是您应该隐藏 $(document) 中的所有复选框 ($('input type["checkbox"]')) .ready，然后将 click 事件绑定到单选按钮 ($('input type["radio"]'))，这会显示相关项目。您可以通过向复选框添加 rel 值来指示哪个单选按钮应显示它们来简化此操作。

Answer 3

另一个解决方案是向复选框添加类，如下所示：

<td>
    <label for="small">Small</label>
    <input type="radio" name="type" value="Small" />
</td>
<td>
    <input type="checkbox" class="Small" name="colours" value="red" />
    <input type="checkbox" class="Small" name="colours" value="blue" />
    <input type="checkbox" class="Small" name="colours" value="yellow" />
</td>

然后，在单选按钮上添加 change() 侦听器，并 show() 相应的复选框：

$(":input[name=type]").change(function() {
    var value = $(this).val();
    $("input[type=checkbox]:not(." + value + ")").hide();
    $("input[type=checkbox]." + value).show();
});

< br>
此处为 jsFiddle 示例