javascript - 获取 radio 检查值并切换 div，无需重新加载页面

Question

这是我的第一个问题。我有两个选项组，当我使用两个组的选定选项时，我希望页面显示结果 div (无需重新加载页面)

我的代码如下

    <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <img src="https://placehold.it/220x120" class="img-responsive img-rounded">
        <input type="radio" name="location" vaule="vn" checked>Viet Nam
    </label>
    <label class="btn btn-default">
        <img src="https://placehold.it/220x120" class="img-responsive img-rounded">
        <input type="radio" name="location" vaule="us">US
    </label>
    <label class="btn btn-default">
        <img src="https://placehold.it/220x120" class="img-responsive img-rounded">
        <input type="radio" name="location" vaule="eu">Europe
    </label></div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <img src="https://placehold.it/220x120" class="img-responsive img-rounded">
        <input type="radio" name="type" vaule="bikers" checked>bikers
    </label>
    <label class="btn btn-default">
        <img src="https://placehold.it/220x120" class="img-responsive img-rounded">
        <input type="radio" name="type" vaule="cars">cars
    </label>
    <label class="btn btn-default">
        <img src="https://placehold.it/220x120" class="img-responsive img-rounded">
        <input type="radio" name="type" vaule="planes">planes
    </label>  
</div>

我想要，例如位置 == vn AND 类型 == biker ==> 将 div id=result 替换为 div id=vnbiker或者如果位置 == eu AND 类型 = cars ==> 将 div id=result 替换为 div id=eunotplanes

当任何单选按钮更改时，结果 div 也应该更改(无需重新加载页面)。

Answer 1

这是您要找的吗？ http://jsfiddle.net/swm53ran/60/

我添加了<div id="result">vn + bikers</div>到 html

js:

$(document).ready(function() {
    $('input:radio').on('change', function() {
        var resultArray = [];
        $('input:radio').each(function() {
            if ($(this).is(':checked') == true) {
                resultArray.push($(this).val());
            }
        });
        $('#result').html(resultArray[0] + ' + ' + resultArray[1]); //or whatever you want to put here
    });
});

js 所做的几乎就是更改任何单选按钮，它会搜索并找到选中的单选按钮并将它们的值插入数组中，然后将这两个值放入 id="result"的 div 中。

**另请注意:在标记中，您将 value 拼写错误(“vaule”是在所有 6 个单选按钮输入的问题中的拼写方式)。

希望这有帮助!

编辑:为了帮助您满足新要求，我创建了一个循环，它迭代我之前设置的结果数组。请参阅演示:http://jsfiddle.net/swm53ran/68/

不同的代码:

    var html = '';
    for (var i = 0; i < resultArray.length; i++) {
        if (i == 0) {
            html += resultArray[0];
        }
        else {
            html += ' + ' + resultArray[i];
        }
    }
    $('#result').html(html);