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>

Что мне нужно сделать, это только показать флажки colours, только если я выберу определенную радиокнопку.Таким образом, эти флажки должны быть скрыты при загрузке страницы и отображаться только в зависимости от выбранного радио.

Я знаю, что могу добиться этого с помощью jQuery, но я не уверен, как бы я это сделал.

Большое спасибо

Answer 1

Есть много способов сделать это с помощью jQuery, но суть в том, что вы должны скрыть все флажки ($('input type["checkbox"]')) в $(document).ready, а затем привязать события click к переключателям ($('input type["radio"]')) , которые показывают соответствующие предметы. Вы могли бы сделать это легко, добавив значения rel к флажкам, чтобы указать, какой переключатель должен их отображать.

Answer 2

Другое решение заключается в добавлении классов к вашим флажкам, например:

<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();
});

jsFiddle пример здесь

Answer 3

Сначала спрячьте строки, содержащие флажки, и все, что вам нужно после этого, будет:

var lastRow = null;

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

Это покажет ряд флажков, связанных с ним. Также будут скрыты все ранее открытые строки для другой переключаемой кнопки.

Вы можете попробовать это здесь:

http://jsfiddle.net/jXrxW/