如何選擇此div元素顯示/隱藏與jQuery？

當我點擊標籤爲「雜誌引文」的複選框時，我希望帶有班級'boat_prize_award_radio_buttons'的div能夠顯示/隱藏，取決於複選框是否被選中。我如何使這項工作正確？如何選擇此div元素顯示/隱藏與jQuery？

這裏是我當前的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>

來源

2014-10-16 Nona

您可以使用jQuery的父母（）方法。 jQuery的parent（）方法只向DOM樹上的單層傳遞。另外，當在jQuery的find（）方法中給classname作爲參數時，您需要給出。課前名稱。

這裏是你想要的腳本：

$(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()

而且，按照您的要求，你應該通過把該代碼在$隱藏在頁面加載的單選按鈕（文件）。就緒功能或使用display：none CSS的屬性

來源

2014-10-16 23:27:58 Chitrang

謝謝，這個答案的主要問題是，我想單個父母 - 選擇多個父母意味着我關閉了所有的孩子一類「.boat_prize_award_radio_buttons」。當我用$（this）.parent（'div'）嘗試它時，它沒有關閉任何東西。 – Nona 2014-10-17 00:06:50

我只是想通了：selected_obj = $（this）.parents（'div'）。filter（'div.outcome'）會給我我需要的，謝謝 – Nona 2014-10-17 00:11:24

你也可以使用selected_obj = $（this）.parents （'。結果'） – Chitrang 2014-10-17 00:14:26

如何選擇此div元素顯示/隱藏與jQuery？

回答

相關問題