jQuery Radio Button Change

Question

So I've looked here and elsewhere on how to execute a function using jQuery when I click a radio button. I'm able to make the example code work isolated, like in CodePen, but it won't work when integrated into my project.

I'm not using straight radio buttons, but bootstrap-ified buttons. Relevant part of the form ends up looking like this:

<div class="btn-group" data-toggle="buttons" role="group" id="floors-div">
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="1" value="1" autocomplete="off">1</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="2" value="2" autocomplete="off">2</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="3" value="3" autocomplete="off">3</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="4" value="4" autocomplete="off">4</label>
</div>

I'm able to get an action when the buttons are clicked by using:

$("input[name='floors']").parent().click(function() {
...snip...
var buttonVal = $("input[type='radio'][name='floors']:checked").val();

But the value is wrong. It returns the value of the previously selected button instead of the current one. If I just do something like:

$("input[name='floors']").change(function() {
...snip...

Nothing happens upon clicking the buttons.

Any suggestions?

Edit: I've narrowed down what's causing the problem with your help. Turns out the main difference between the CodePen that I did and production is the inclusion of Bootstrap's JS. Apparently they're overriding something that's messing with the .change method. Issue reproduced in CodePen here.

Edit 2: If it matters, all of my JS is inside $(document).ready(function(){ as well.

Answer 1

Try like this using event delegation.

 $("#floors-div").on("change", "input[name='floors']", function () {
        //code snippets
 });

Or

$(document).on("change", "input[name='floors']", function () {
        //code snippets
 });

Answer 2

After viewing your code on codepen ,I sorted out your problem & found that your code is correct, actually the problem was whenever you click on the button,you don't actually clicks on the radio button rather you click on the 'label'. Whenever I remove the label tag your code perfectly works. here is the image.

.

But I solved your problem by this code :) You can check demo. Also edited your codepen -> http://codepen.io/anon/pen/mJozaQ

$(document).ready(function(){
 
  $("label.floorNum").on("click",function()
  { 

          alert($(this).find('input').val());
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
    <div class="form-inline">
        <div class="form-group col-sm-3">
            <label for="housingArea">Area</label>
            <select id="housingArea" class="form-control">
                <option value="" style="display:none" selected></option>
                <option value="north">North</option>
                <option value="south">South</option>
                <option value="east">East</option>
                <option value="west">West</option>
            </select>
        </div>
        <div class="form-group col-sm-4">
            <label for="building">Building</label>
            <select id="building" class="form-control">
                <option value="" style="display:none" selected></option>
                <option value="AAA">AAA</option>
                <option value="BBB">BBB</option>
            </select>
        </div>
        <div class="form-group col-sm-5">
            <!--Fill with info from DB -->
            <label for="floorNum">Floor</label>
            <div class="btn-group" data-toggle="buttons" role="group">
                <label class="btn btn-default floorNum">
                    <input type="radio" name="floorNum" value="1" autocomplete="off">1
                </label>
                <label class="btn btn-default floorNum">
                    <input type="radio" name="floorNum" value="2" autocomplete="off">2
                </label>
                <label class="btn btn-default floorNum">
                    <input type="radio" name="floorNum" value="3" autocomplete="off">3
                </label>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="form">
        <div class="form-group">
            <label for="roomNum">Room Number</label>
            <br>
            <div class="btn-group" data-toggle="buttons" role="group">
                <label class="btn btn-default">
                    <input type="radio" name="roomNum" id="101" autocomplete="off">101
                </label>
                <label class="btn btn-danger">
                    <input type="radio" name="roomNum" id="102" autocomplete="off">102
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="roomNum" id="103" autocomplete="off">103
                </label>
                <label class="btn btn-success">
                    <input type="radio" name="roomNum" id="104" autocomplete="off">104
                </label>
                <label class="btn btn-warning">
                    <input type="radio" name="roomNum" id="105" autocomplete="off">105
                </label>
                <label class="btn btn-info">
                    <input type="radio" name="roomNum" id="106" autocomplete="off">106
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="roomNum" id="107" autocomplete="off">107
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="roomNum" id="108" autocomplete="off">108
                </label>
            </div>
        </div>
    </div>
</div>