获取单选检查值并切换 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>

我想要，例如 location == vn AND type == biker ==> 将 div id=result 替换为 div id=vnbiker 或者如果 location == eu AND type = 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 所做的几乎就是改变任何单选按钮，它搜索并找到选中的单选按钮并将它们的值推送到数组中，然后将这两个值放入 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);

Answer 2

我对您的代码进行了一些修改，并添加了必要的内容以使其成为一个完整的 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>

获取单选检查值并切换 div 而无需重新加载页面

get radio checked values and switch div without reload page

javascript

jquery

radio