Javascript 如何选择此子div元素以使用jQuery显示/隐藏?
当我点击标记为“杂志引文”的复选框时,我希望带有“boat_prize_award_radio_buttons”类的div能够显示/隐藏,具体取决于复选框是否选中。我如何正确地使其工作 以下是我当前的coffeescript/jQuery代码:Javascript 如何选择此子div元素以使用jQuery显示/隐藏?,javascript,jquery,html,coffeescript,Javascript,Jquery,Html,Coffeescript,当我点击标记为“杂志引文”的复选框时,我希望带有“boat_prize_award_radio_buttons”类的div能够显示/隐藏,具体取决于复选框是否选中。我如何正确地使其工作 以下是我当前的coffeescript/jQuery代码: $(document).ready -> $(".benefit_flag").change -> selected_obj = $(this).parent('div') if $(this).is(":checked"
$(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>
$(文档).ready->
$(“.benefit_flag”)。更改->
所选对象=$(this).parent('div')
如果$(this).is(“:checked”)
选定的对象查找(“船奖”单选按钮)。显示()
其他的
选定的对象查找(“船奖”单选按钮)。隐藏()
- 等等
- 等等
- 等等:
杂志引用
提到了杂志
没有提到杂志
我的试验基金奖促成了这一结果
- 是
- 否
您可以使用jQuery parents()方法。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()
此外,根据您的要求,您应该隐藏页面加载上的单选按钮,方法是将代码放入$(document)。ready函数或使用CSS的display:none属性。谢谢,这个答案的主要问题是我想要一个单亲-选择多个双亲意味着我用一个“.boat_prize_award_radio_buttons”。当我用$(this.parent('div')尝试它时,它没有关闭任何东西。我只是想:selected_obj=$(this.parents('div')。filter('div.outal')会给我需要的东西,谢谢你也可以使用selected_obj=$(this.parents)。parents('.output'))