将 document.getElementById 用于复选框的更有效方法？答案

【问题标题】：More efficient way to use document.getElementById for checkboxes?将 document.getElementById 用于复选框的更有效方法？
【发布时间】：2013-12-18 21:40:04
【问题描述】：

这部分代码使用 jQuery 来隐藏/显示表单字段。当它们被隐藏时，这些字段的值设置为空。这对于具有唯一 ID 的输入字段来说很容易。我遇到了复选框问题。下面的代码适用于三个复选框。但是我必须对一组 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>

【问题讨论】：

他们都有相同的类。你考虑过按班级选择他们吗？还是按名字？还是由共同的父母？

标签： javascript jquery forms checkbox

【解决方案1】：

使用类，因为许多元素可以共享一个类。因此，您只需取消选中某个类的所有复选框：

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

【讨论】：

添加注释以确保用户已包含 jQuery 库。
@KyleB。鉴于问题被标记为 jQuery 并使用 jQuery 样式代码，我认为这很明显:)
显然我需要我的眼镜，因为我错过了。好点子。

【解决方案2】：

当然要使用 jquery 选择器的强大功能！

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

后代选择器 - http://api.jquery.com/descendant-selector/

设置选中的属性 - http://api.jquery.com/prop/

【讨论】：

【解决方案3】：

一种方法是将子选择器与复选框选择器结合使用，并使用 jQuery 中的 each 函数进行迭代以完成您要查找的内容。

请记住，这是未经测试的，所以它可能会引发错误，我相信你会解决这个问题。在上滑效果下，您需要以下内容：

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

希望这对编码有所帮助！

【讨论】：