获取无线电检查值和切换div没有重新加载页面

我的第一个问题在这里。我有两个选项组，当我使用两组选择的选项，我所希望的网页显示的结果DIV（不刷新页面）获取无线电检查值和切换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 type == biker ==>将div id = vnbiker 替换为div id = result = div id = eunotplans

当更改任何单选按钮时，结果div也应该改变（没有页面重新加载）。

来源

2015-01-09 Tien Nguyen

你能发布代码和你目前在JsFiddle.net上工作的内容？ – 2015-01-09 19:11:18

这是你在找什么？ 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正在做的是在任何单选按钮的变化，它会搜索并找到检查单选按钮和推它们的值放入一个数组中，然后它将这两个值放在div中，id =“result”。

**还注意：在您的标记中，您拼写的值错误（“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);

来源

2015-01-09 19:43:11 indubitablee

非常感谢，它的工作！ – 2015-01-10 05:49:01

现在我又遇到了另一个问题。如果我有两台以上的收音机，那么js不能工作了。如果我需要js只改变name = location和name = type的结果，我该怎么做？ – 2015-01-13 17:22:13

@TienNguyen检查编辑我的答案：]希望这可以帮助！ – indubitablee 2015-01-13 17:45:12

我做了一些修改你的代码，并加入使它成为一个完整的HTML文件进行必要的，那就是：

<html> 
<head> 
<script type="text/javascript"> 
function clk() { 
if ((document.getElementById("vn").checked == true) && 
     (document.getElementById("bk").checked == true)) 
    { document.getElementById("result").style.cssText = 
     document.getElementById("vnbiker").style.cssText; 
     document.getElementById("result").innerHTML = 
     document.getElementById("vnbiker").innerHTML; 
     return; 
    } 
    if ((document.getElementById("eu").checked == true) && 
     (document.getElementById("cr").checked == true)) 
    { document.getElementById("result").style.cssText = 
     document.getElementById("eunotplanes").style.cssText; 
     document.getElementById("result").innerHTML = 
     document.getElementById("eunotplanes").innerHTML; 
    } 
} 
</script> 
</head> 
<body> 
<div id="vnbiker" style="background-color:green;">div vnbiker</div> 
<div id="eunotplanes" style="background-color:orange;">div eunotplanes</div> 
<!-- ABOVE IS MY NEW CODE --> 
<!-- BELOW IS YOUR CODE, I ADDED "ID" AND "ONCLICK" TO RADIOBUTTONS --> 
    <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" value="vn" id="vn" onclick="clk();">Viet Nam 
    </label> 
    <label class="btn btn-default"> 
     <img src="https://placehold.it/220x120" class="img-responsive img-rounded"> 
     <input type="radio" name="location" value="us" checked id="us" onclick="clk();">US 
    </label> 
    <label class="btn btn-default"> 
     <img src="https://placehold.it/220x120" class="img-responsive img-rounded"> 
     <input type="radio" name="location" value="eu" id="eu" onclick="clk();">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" value="bikers" checked id="bk" onclick="clk();">bikers 
    </label> 
    <label class="btn btn-default"> 
     <img src="https://placehold.it/220x120" class="img-responsive img-rounded"> 
     <input type="radio" name="type" value="cars" id="cr" onclick="clk();">cars 
    </label> 
    <label class="btn btn-default"> 
     <img src="https://placehold.it/220x120" class="img-responsive img-rounded"> 
     <input type="radio" name="type" value="planes" id="pl" onclick="clk();">planes 
    </label> 
</div> 
<!-- BELOW CODE IS MINE --> 
<div id="result" style="background-color:magenta;">div result</div> 
</body> 
</html>

来源

2015-01-09 20:11:36

获取无线电检查值和切换div没有重新加载页面

回答

相关问题