我的第一个问题在这里。我有两个选项组,当我使用两个组的选定选项时,我希望页面显示结果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和类型==骑自行车的人==>用div id = vnbiker替换div id = result
或如果location == eu AND type = cars ==>用div id = eunotplanes替换div id = result

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

最佳答案

这是您要找的东西吗? http://jsfiddle.net/swm53ran/60/

我在HTML中添加了<div id="result">vn + bikers</div>

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

**还请注意:在您的标记中,您拼写错误的值(“ 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);

09-10 00:52
查看更多