如何选择此子div元素以显示/隐藏jQuery？

Question

当我单击标记为“ Magazine Citation”的复选框时，我希望具有类别“ boat_prize_award_radio_buttons”的div能够显示/隐藏，具体取决于是否选中了该复选框。 我如何使它正常工作？

这是我当前的coffeescript / jQuery代码：

$(document).ready ->
  $(".benefit_flag").change ->
    selected_obj = $(this).parent('div')
    if $(this).is(":checked")
      selected_obj.find('boat_prize_award_radio_buttons').show()
    else
      selected_obj.find('boat_prize_award_radio_buttons').hide()




<div class='outcome'>
  <ul>
    <li>etc.</li>
    <li>etc.</li>
    <li>etc.:</li>
    <fieldset class="inputs"><ol><li class="boolean input optional" id="person_magazines_attributes_12_benefit_flag_input"><input name="person[publications_attributes][12][benefit_flag]" type="hidden" value="0" /><label class="" for="person_magazines_attributes_12_benefit_flag"><input class="benefit_flag" id="person_magazines_attributes_12_benefit_flag" name="person[publications_attributes][12][benefit_flag]" type="checkbox" value="1" />Magazine citation</label>

    </li>
    <li class="radio input optional" id="person_magazines_attributes_12_citation_status_input"><fieldset class="choices"><ol class="choices-group"><li class="choice"><label for="person_magazines_attributes_12_citation_status_magic_was_cited"><input id="person_magazines_attributes_12_citation_status_magic_was_cited" name="person[publications_attributes][12][citation_status]" type="radio" value="Magazine was mentioned" />Magazine was mentioned</label></li>
    <li class="choice"><label for="person_magazines_attributes_12_citation_status_magic_was_not_cited_but_should_have_been"><input id="person_magazines_attributes_12_citation_status_magic_was_not_cited_but_should_have_been" name="person[publications_attributes][12][citation_status]" type="radio" value="Magazine was not mentioned" />Magazine was not mentioned</label></li></ol></fieldset>

    </li>
    </ol></fieldset>
    <div class='boat_prize_award_radio_buttons'>
      <p>My pilot fund award contributed to this outcome</p>
      <li class="radio input optional" id="person_magazines_attributes_12_boat_prize_award_contributed_input"><fieldset class="choices"><ol class="choices-group"><li class="choice"><label for="person_magazines_attributes_12_boat_prize_award_contributed_yes"><input id="person_magazines_attributes_12_boat_prize_award_contributed_yes" name="person[publications_attributes][12][boat_prize_award_contributed]" type="radio" value="Yes" />Yes</label></li>
      <li class="choice"><label for="person_magazines_attributes_12_boat_prize_award_contributed_no"><input id="person_magazines_attributes_12_boat_prize_award_contributed_no" name="person[publications_attributes][12][boat_prize_award_contributed]" type="radio" value="No" />No</label></li></ol></fieldset>

      </li>
    </div>
    </ul>
</div>

Answer 1

您可以使用jQuery parent（）方法。 jQuery的parent（）方法仅在DOM树上移动单个级别。 另外，当在jQuery的find（）方法中将类名作为参数时，您需要给。 在班级名称之前。

这是您想要的脚本：

$(document).ready ->  
  $(".benefit_flag").change ->
    selected_obj = $(this).parents('div')
    if $(this).is(":checked")
      selected_obj.find('.boat_prize_award_radio_buttons').show()
    else
      selected_obj.find('.boat_prize_award_radio_buttons').hide()

另外，根据您的要求，应通过将代码加载到$ {document）.ready函数中或使用CSS的display：none属性来隐藏页面加载时的单选按钮