如何获得文本而不是值,当我点击单选按钮?
下面的代码获取单选按钮的值。我想接短信(节目或电影)。提前道谢。
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
在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>
您必须向单选按钮添加数据属性,或者手动查询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>
null
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>