两个单选按钮集 - JQuery 个变量

Question

所以我这几天一直在弄乱这个 jQuery 代码，但我很难让它正常工作。

基本上我的目标是有 2 组单选按钮对应于动态 divs。我希望 jquery 在单击任意一组单选按钮时激活，获取两组按钮的值，然后根据按钮的值动态更改显示的 div。我非常接近，但我的问题是我只获得了我最近选择的按钮的值，另一个显示为未定义。

我尝试在这个问题中实现该技术，但仍然没有得到第二个变量：How to validate two sets of radio buttons

这是我的代码：

<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>

Answer 1

“>”仅适用于直系后代。您需要将其更改为“.find”才能更深入。在这里查看：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();
    });
});

两个单选按钮集 - JQuery 个变量

Two Radio Button Sets - JQuery variables

jquery

html

radio-button