獲取無線電檢查值和切換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沒有重新加載頁面

回答

相關問題