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 ==＆gt;用div id = vnbiker替换div id = result 或者如果location == eu AND type = cars ==＆gt;将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 =＆＃34;结果＆＃34;

**还要注意：在你的标记中，你拼错了值（＆＃34; vaule＆＃34;它是如何拼写所有6个单选按钮输入的问题）。

希望这有帮助！

编辑：为了帮助您满足新的需求，我创建了一个循环，它循环遍历我之前设置的结果数组。见demo：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而不重新加载页面

2 个答案: