Более эффективный способ использования document.getElementById для флажков?

Question

В этом разделе кода используется jQuery для скрытия/отображения полей формы. Когда они скрыты, значения этих полей устанавливаются как пустые. Это легко для поля ввода с его уникальным идентификатором. У меня проблемы с флажками. Код ниже работает для трех флажков. Но я должен использовать эту же методику для набора из 26 флажков. Как я могу сделать это более эффективно?

$(".transfer").click(function(){ 
    if ($('input[name=transfer_position]:checked').val() == "yes") { 
     //Slide Down Effect 
     $(".transfer_details").slideDown("slow"); 
     document.getElementById('transfer_interest').focus(); 
    } else { 
     //Slide Up Effect 
     $(".transfer_details").slideUp("slow"); 
     document.getElementById('transfer_interest').value = ""; 
     document.getElementById('select_positions_0').checked = false; 
     document.getElementById('select_positions_1').checked = false; 
     document.getElementById('select_positions_2').checked = false; 
    } 
}); 

---

<li> 
     <label> 
     <input type="radio" name="transfer_position" class="transfer" value="yes" id="transfer_position_0" /> 
     Yes</label> 
     <label> 
     <input type="radio" name="transfer_position" class="transfer" value="no" id="transfer_position_1" /> 
     No</label> 
    </li> 
    <li class="transfer_details"> 
    <label for="transfer_interest">Why are you interested in transferring to your selected SL positions and what would you bring to that position(s) and team(s)?</label> 
    <textarea name="transfer_interest" id="transfer_interest" cols="80" rows="6"> </textarea> 
    </li> 
    <li class="transfer_details"> 
     <label> 
     <input type="checkbox" name="select_positions[]" class="select_positons" value="Resident Advisor" id="select_positions_0" /> 
     Resident Advisor</label> 
     <label> 
     <input type="checkbox" name="select_positions[]" class="select_positons" value="Programming Assistant" id="select_positions_1" /> 
     Programming Assistant</label> 
     <label> 
     <input type="checkbox" name="select_positions[]" class="select_positons" value="Social Justice Advocate " id="select_positions_2" /> 
     Social Justice Advocate </label> 
    </li> 

Answer 1

Используйте классы, так как многие элементы могут совместно использовать класс. Таким образом, вы просто снимите все флажки с определенным классом:

$('.select_positions').attr('checked', false); 

Answer 2

Используйте удивительную силу селекторы Jquery, конечно!

$('li.transfer_details input[type=checkbox]').prop("checked", false); 

Селектор потомков - http://api.jquery.com/descendant-selector/

установка проверенного атрибута - http://api.jquery.com/prop/

Answer 3

Один из подходов будет использовать селектор ребенка в сочетании с селектором CheckBox, и итерация, используя каждую функцию в JQuery чтобы выполнить то, что вы ищете.

Имейте в виду, что это не проверено, поэтому, вероятно, это вызовет ошибки, и я надеюсь, что вы это исправите. Под слайдом вверх эффект, вы хотите что-то вроде следующий:

$('.transfer_details > input:checkbox').each(function() { 
(this).checked = false; 
}); 

Надеется, что это помогает и счастливым кодированию!