get child element that gets selected inside div element

Question

How do I get the radio button that is checked from inside my div

Here is my jquery but c is returning undefined

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

Here is my 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>

Possible duplicate: http://stackoverflow.com/q/986120/584846 — Brent Washburne, Mar 11 '15 at 00:45
Why not use a class, then you can use `this` because `this` will = to the element used to trigger the function. Here's something that uses the same method *one function* http://stackoverflow.com/questions/28969021/jquery-js-how-to-get-menu-name-from-a-href-based-class/28969221#28969221 And http://stackoverflow.com/questions/28954143/toggle-yes-no-with-multiple-questions/28954314#28954314 — NewToJS, Mar 11 '15 at 00:48

score 1 · Answer 1 · answered Mar 11 '15 at 00:44

Use the :checked selector

$('#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>

In your case you are iterating over the children of SpaceType which are the label elements and they don't have an id, also you are reading the data called id not the id attribute.

It's not worth writing a new answer, but retrieving the `id` is also trivial in native JavaScript: `c = this.querySelector('input:checked').id;` — David Thomas, Mar 11 '15 at 01:04

get child element that gets selected inside div element

1 Answers1