为了账号安全,请及时绑定邮箱和手机立即绑定

允许 div 上的隐藏/显示仅在其单选按钮组内起作用,并且不会影响相同形式的其他单选按钮组

允许 div 上的隐藏/显示仅在其单选按钮组内起作用,并且不会影响相同形式的其他单选按钮组

当年话下 2023-10-20 15:18:39
所以我有这样的形式,其中有 3 个无线电组,它们根据选择的内容隐藏和显示自己的 div 集。问题是我现在的代码隐藏了所有 3 个无线电组中的无线电内容 div。我该如何解决这个问题?理想情况下,当表单加载时,所有“是”内容都会显示,当有人在问题 1 中选择“否”时,radioContentOne 会隐藏,radioContentTwo 会出现。目前,当我在问题 1. radioContentOne 中选择“否”时,将隐藏三、四、五、六。我对 jquery 很陌生,不知道我哪里出错了。<div class="row">  <div class="col-lg-12">    <div class="form-group">        <label>question 1<label>        <div class="custom-radio-checkbox d-inline-block">            <div class="radio-input>                  <input name="radioGroup1" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentOne" checked>                  <label for="radio-no-border-inline-1">Yes</label>                 </div>        </div>        <div class="custom-radio-checkbox d-inline-block">             <div class="radio-input>                  <input name="radioGroup1" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentTwo">                  <label for="radio-no-border-inline-2">No</label>                 </div>        </div>    </div></div><div class="row">      <div class="col-lg-12">        <div class="form-group">            <label>question 2<label>            <div class="custom-radio-checkbox d-inline-block">                <div class="radio-input>                      <input name="radioGroup2" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentThree" checked>                      <label for="radio-no-border-inline-1">Yes</label>                     </div>            </div>            <div class="custom-radio-checkbox d-inline-block">                 <div class="radio-input>                      <input name="radioGroup2" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentFour">                      <label for="radio-no-border-inline-2">No</label>                     </div>            </div>        </div>    </div> </div>
查看完整描述

1 回答

?
慕雪6442864

TA贡献1812条经验 获得超5个赞

目前,您正在定位 HTML 中的所有项目,以便仅定位单击的组中的项目,您可以使用 .parents 选择器查找父级,然后搜索相关项目。https://api.jquery.com/parents/


$(document).ready(function(){

    $("[class^='radioGroup']").click(function(){

        var inputValue = $(this).attr("value");

        var parents = $(this).parents(".form-group");

        var targetBox = parents.find("." + inputValue);

        parents.find('.radioOption').not(targetBox).hide();

        parents.find(targetBox).show();

    });

});


查看完整回答
反对 回复 2023-10-20
  • 1 回答
  • 0 关注
  • 64 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信