在JavaScript中，如何使它懸停在標簽上並在ap標簽中輸出單選按鈕的值？

Question

假設我有一個帶有單選按鈕的列表。 如何使鼠標懸停在標簽上，將單選按鈕的值寫入HTML到<p>標記中？

可以這么說：

o Option One

將鼠標懸停在選項一上會將單選按鈕的值寫入下面的<p>標記中。

我的代碼在下面，它將無法正常工作。 如果用戶單擊其他單選按鈕，則應該明顯更新。

function showDegree() {
    var degreeOptions = document.getElementsByName('degree');
    var degreeChoice;
    var i;

    for (i = 0; i < degreeOptions.length; i++) {
        if (degreeOptions[i].checked) {
            degreeChoice = degreeOptions[i].value;
        }
    }

    document.getElementById('degreeOutput').innerHTML = degreeChoice;
}

Answer 1

您將不得不使用一個Event，您想到的是Hover這個詞（主要用於樣式設置），但在這種情況下，您需要考慮onmouseover這個詞（用於操作...事件）。

假設您有以下內容：

<input type=radio value="val1">Option 1
<p id=optDisplay></p>

您必須在每個input以下內容：

<input type=radio value="val1" onmouseover="document.getElementById( 'optDisplay').textContent = this.value;">Option 1

請注意，只有當鼠標指針懸停在單選元素上方時，它才會發生，只有小圓圈，如果您將文本“選項1”指向鼠標，則不會起作用。 如果要完成此操作，可以將input元素和文本包裝在另一個標簽（例如span or div ，而該標簽必須具有如下onmouseover ：

<span onmouseover="document.getElementById( 'optDisplay').textContent = this.firstChild.value;"><input type=radio value="val1"> Option 1</span>

onmouseover改變了一點，至於您單擊“更新”時所說的，您不必做任何事情，就好像您單擊鼠標一樣，鼠標將懸停在它上面，並且只要您不指向其他任何選項會保持那樣。

如果單擊一次以阻止任何其他更改，則將變得有些棘手，但是快速考慮一下，例如可以添加另一個事件onclick來刪除<P>的ID，然后在此之后，如果您指針其他選項，它們將不會找到<P> ，沒有更新。

Answer 2

嘗試如果

.checked == true

要么

如果.checked =='選中'

-很抱歉，我習慣於圍繞jQuery進行編碼，以至於我忘記了執行本機的正確方法...在那一點上，如果性能不是問題，您可能要考慮使用jquery，這很簡單在jQuery中。