如何在需要更新的網頁上有變量？

我有三個單選按鈕。每個都有一個值（1,2或3）。在單選按鈕下，我需要一個與當前所選單選按鈕的值相匹配的數字。這必須實時更新。如何在需要更新的網頁上有變量？

目前，我有這樣的事情：

<input type="radio" Id="case" value="1" checked> 
<input type="radio" Id="case" value="2"> 
<input type="radio" Id="case" value="3"> 

<script> 
document.write(document.getElementById("case").value); 
</script>

當頁面加載時，JavaScript運行一次，並打印「1」。當我選擇另一個單選按鈕時，我想要更改此號碼，但我不確定如何操作。我靈活的解決方案，不必在JavaScript ...任何建議，將不勝感激。我正在使用Rails。

來源

2015-09-26 user1784658

http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-事件 –

如果頁面已加載（很多時間），是否要激活上次更改？ –

這是通過使用addEventListener完成的。請看下面的代碼::

function changeValue(event) { 
 
    if (event.target.getAttribute('type') == 'radio') { 
 
     document.getElementById('newValue').innerHTML = event.target.value; 
 
    } 
 
} 
 

 
document.getElementById('buttons').addEventListener('click', changeValue, false);

<div id='buttons'> 
 
    <input type="radio" name="case" value="1" checked> 
 
    <input type="radio" name="case" value="2"> 
 
    <input type="radio" name="case" value="3"> 
 
</div> 
 
<span id='newValue'>1</span>

這應該幫助您開始編寫代碼，你需要。

請記住爲所有輸入提供相同的名稱，而不是相同的ID。同一個名稱保持多個輸入不被同時檢查。將相同的ID設置爲多個元素不是標準，可能會導致您的困惑。

來源

2015-09-26 19:32:50 Jesse

-1

嘗試使用給定的代碼。可能會是你需要的東西。

<!doctype html> 
 
<html > 
 

 
<head> 
 
    <title>content</title> 
 

 
    
 
</head> 
 

 
<body> 
 

 
<input type="radio" Id="case" value="1" checked name="a"> 
 
<input type="radio" Id="Radio1" value="2" name="a"> 
 
<input type="radio" Id="Radio2" value="3" name="a"> 
 
    <span id="val"></span> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script> 
 
    
 
    $(function() { 
 
     $('input[type=radio]').click(function() { 
 
      $('#val').html($(this).val()); 
 
     }) 
 
    }) 
 

 
</script> 
 

 
</body> 
 
</html>

來源

2015-09-26 19:38:20 vivek

這個問題沒有太大的關係jquery – Jesse

謝謝。我現在正在閱讀jQuery，它似乎正是我正在尋找的東西。 – user1784658

@Jeese，請注意，該問題包含「我在解決方案中很靈活，不必在JavaScript中」。這就是我按照自己的喜好回答的原因。我知道這個事實也可以純粹用JavaScript來完成。無論如何，謝謝 – vivek

另外的可能的方法之一：

<input type="radio" name="case" value="1" checked />Value 1<br /> 
<input type="radio" name="case" value="2" />Value 2<br /> 
<input type="radio" name="case" value="3" />Value 3<br /> 
<div id="radioValue">Selected value is: <span>1</span></div> 


<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script> 

$(document).ready(function() { 

    $('input[name='case']').click(function() { 
     $("div#radioValue span").text($(this).val()); 
    }); 

}); 

</script>

來源

2015-09-26 22:10:43 Ren

正是我需要的。我之前沒有使用jquery，但它看起來像是一個用於客戶端HTML操作的優秀工具。 – user1784658

@Ren，你必須注意，HTML中的每個元素都必須具有唯一的id值。所有單選按鈕中不能有相同的Id值。在這種情況下驗證HTML將顯示錯誤。 – vivek

@vivek：不想改變作者原始輸入元素的結構。但是，根據您的反饋，我已更改ID =>姓名。希望這個或其他答案幫助他解決了他的問題。 – Ren

如何在需要更新的網頁上有變量？

回答

相關問題