javascript - 获取在 div 元素内选择的子元素

Question

这个问题已经有答案了:

In jQuery, how do I select an element by its name attribute? (18 个回答)

已关闭 8 年前。

如何获取从 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>

Answer 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，而不是 id 属性。