获取在 div 元素中被选中的子元素 [重复]

Posted 2023-03-05

【中文标题】获取在 div 元素中被选中的子元素 [重复]

【英文标题】：get child element that gets selected inside div element [duplicate]

【发布时间】：2015-05-12 15:42:13

【问题描述】：

如何获取从我的 div 中选中的单选按钮

这是我的 jquery，但 c 返回未定义

$('#SpaceType').change(function () 
    var kids = $(this).children();
    $(kids).each(function() 
        var c = $(this).data('id');
    );
);

这是我的 div

<div class="btn-group" data-toggle="buttons" id="SpaceType">
                    <label id="SpaceTypeLabelHouse" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="0"> House
                    </label>
                    <label id="SpaceTypeLabelApartment" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
                    </label>
                    <label id="SpaceTypeLabelStudio" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
                    </label>
                    <label id="SpaceTypeLabelOther" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
                    </label>
                </div>

【问题讨论】：

可能重复：***.com/q/986120/584846

为什么不使用类，那么可以使用this，因为this会=到用于触发功能的元素。这是使用相同方法的东西 一个函数 ***.com/questions/28969021/… 和 ***.com/questions/28954143/…

【参考方案1】：

使用 :checked 选择器

$('#SpaceType').change(function () 
  var c  = $(this).find(':checked').attr('id');
  alert(c)
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="SpaceType">
  <label id="SpaceTypeLabelHouse" class="btn btn-primary">
    <input type="radio" name="typeoptions" autocomplete="off" id="0"> House
  </label>
  <label id="SpaceTypeLabelApartment" class="btn btn-primary">
    <input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
  </label>
  <label id="SpaceTypeLabelStudio" class="btn btn-primary">
    <input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
  </label>
  <label id="SpaceTypeLabelOther" class="btn btn-primary">
    <input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
  </label>
</div>

在您的情况下，您正在迭代 SpaceType 的子元素，它们是 label 元素并且它们没有 id，而且您正在阅读称为 id 的 data 而不是 @987654328 @ 属性。

【讨论】：

不值得写一个新的答案，但是在原生 javascript 中检索 id 也是微不足道的：c = this.querySelector('input:checked').id;