获取选中单选按钮的文本

Question

如何获得文本而不是值，当我点击单选按钮？

下面的代码获取单选按钮的值。我想接短信（节目或电影）。提前道谢。

null

function myFunction(contentType) {
  document.getElementById("myspan").innerHTML = contentType;
}

<label><input type="radio" oninput="myFunction(this.value)" value="1" name="contentType"><span>Shows</span></label>
<label><input type="radio" oninput="myFunction(this.value)" value="2" name="contentType" ><span>Movies</span></label>

<span id="myspan" class="text-muted" ></span>

null

Answer 1

null

js lang-js prettyprint-override">function myFunction(contentType) {
    document.getElementById("myspan").innerHTML = contentType;
}

<label><input type="radio" oninput="myFunction(this.value)" value="shows" name="contentType"><span>Shows</span></label>
<label><input type="radio" oninput="myFunction(this.value)" value="movies" name="contentType" ><span>Movies</span></label>
  
<span id="myspan" class="text-muted" ></span>

Answer 2

您必须向单选按钮添加数据属性，或者手动查询DOM以获取与该单选按钮相关的标签的文本内容。

null

function myFunction(input) {
  document.getElementById("myspan").innerHTML = input.dataset.textValue;
}

<label><input type="radio" oninput="myFunction(this)" value="1" data-text-value="Shows" name="contentType"><span>Shows</span></label>
<label><input type="radio" oninput="myFunction(this)" value="2" data-text-value="Movies" name="contentType" ><span>Movies</span></label>

<span id="myspan" class="text-muted" ></span>

Answer 3

在myFunction（）中执行以下操作：

function myFunction(inputRadio) {
  document.getElementById("myspan").innerHTML = inputRadio.nextSibling.innerText;
}

在您的HTML中，将this.value更改为this，您就可以开始了！

<label><input type="radio" oninput="myFunction(this)" value="1" name="contentType"><span>Shows</span></label>
<label><input type="radio" oninput="myFunction(this)" value="2" name="contentType" ><span>Movies</span></label>

<span id="myspan" class="text-muted" ></span>