CODEWITHSUNDEEP
jqueryhtmlradio-button
Guenevere
Guenevere

Reputation: 75

Two Radio Button Sets - JQuery variables

So I have been messing around with this jQuery Code for couple of days now and I am having trouble getting it to work right.

Basically my goal is to have 2 sets of radio buttons corresponding to dynamic divs. I want the jquery to activate when either set of radio buttons are clicked, take in the value of both sets of buttons and then dynamically change which div is showing based on the value of the butttons. I am very close but my issue is that I am only getting the value of the button I have most recently selected, the other is showing as undefined.

I tried implementing the technique in this question, but am still not getting the second variable: How to validate two sets of radio buttons

Here is my code:

<html>
<head> 
<link type="text/css" rel="stylesheet" href="JS-and-CSS/stylesheet.css" /> 
<script type="text/javascript" language="javascript"
    src="JS-and-CSS/jquery.min.js"></script>
<title></title>
</head>
<body>
    <div id="wrapper2">

        <script>
            $(document).ready(function() {
                $("input[name$='monitorVersion']").click(function() {
                    var monitor = $('#monitorSelection > input:radio:checked').val();
                    var option = $('#optionSelection > input:radio:checked').val();
                    $("div.version").hide();
                    $("#stuff").html(monitor + option);
                    $("#View" + monitor + option).show();
                });
                $("input[name$='viewOptions']").click(function() {
                    var monitor = $('#monitorSelection > input:radio:checked').val();
                    var option = $('#optionSelection > input:radio:checked').val();
                    $("div.version").hide();
                    $("#stuff").html(monitor + option);
                    $("#View" + monitor + option).show();
                });
            }); 
        </script>


        <div id="userBox">
            <div id="monitorSelection">
                <h4>
                    label<input type="radio" name="monitorVersion" value="A"
                        checked="checked" /> label<input type="radio"
                        name="monitorVersion" value="B" /> label<input
                        type="radio" name="monitorVersion" value="C" />
                </h4>
            </div>

            <div id="optionSelection"> 
                label<input type="radio" name="viewOptions" checked="checked"
                    value="1" /> label<input type="radio" name="viewOptions"
                    value="2" /> label<input type="radio" name="viewOptions"
                    value="3" /> label<input type="radio" name="viewOptions" value="4" />
            </div>

            <div id="stuff"></div>

            <div id="ViewA1" class="version">
            </div>

            <div id="ViewA2" class="version" style="display: none;">
            </div>

            <div id="ViewA3" class="version" style="display: none;">
            </div>

            <div id="ViewA4" class="version" style="display: none;">
            </div>

            <div id="ViewB1" class="version" style="display: none;">
            </div>

            <div id="ViewB2" class="version" style="display: none;">
            </div>

            <div id="ViewB3" class="version" style="display: none;">
            </div>

            <div id="ViewB4" class="version" style="display: none;">
            </div>

            <div id="ViewC1" class="version" style="display: none;">
            </div>

            <div id="ViewC2" class="version" style="display: none;">
            </div>

            <div id="ViewC3" class="version" style="display: none;">
            </div>

            <div id="ViewC4" class="version" style="display: none;">
            </div>

        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 528

Answers (1)

dev4life
dev4life

Reputation: 882

The ">" only works for direct decendents. You need to change it to ".find" to go more deeper. Check it out here: http://jsfiddle.net/6qzmL6rb/3

$(document).ready(function() {
    $("input[name$='monitorVersion']").click(function() {
        var monitor = $('#monitorSelection').find('input:radio:checked').val();
        var option = $('#optionSelection > input:radio:checked').val();
        $("div.version").hide();
        $("#stuff").html(monitor + option);
        $("#View" + monitor + option).show();
    });
    $("input[name$='viewOptions']").click(function() {
        var monitor = $('#monitorSelection').find('input:radio:checked').val();
        var option = $('#optionSelection > input:radio:checked').val();
        $("div.version").hide();
        $("#stuff").html(monitor + option);
        $("#View" + monitor + option).show();
    });
});

Upvotes: 1

Related Questions