我的第一个问题在这里。我有两个选项组,当我使用两个组的选定选项时,我希望页面显示结果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);