單擊單選按鈕時跨度文本更改
[英]Span Text change when a Radio Button is clicked
問題描述
嘿家伙我如何可以改變一個跨度內的文本被點擊一個單選按鈕時。 范圍的文本將與單選按鈕的值相同。
<h2><span class="text-navy">Data Input - </span><span class="this is the one to be changed">~</span></h2> <label class="radio-inline"><input type="radio" name="team" value="CCP" id="1"/>CCP</label> <label class="radio-inline"><input type="radio" name="team" value="WMP" id="2"/>WMP</label> <label class="radio-inline"><input type="radio" name="team" value="ELT" id="3"/>ELT</label> <label class="radio-inline"><input type="radio" name="team" value="Central QA" id="4" />Central QA</label> <label class="radio-inline"><input type="radio" name="team" value="Global Education" id="5"/>Global Education</label> <label class="radio-inline"><input type="radio" name="team" value="Mobile" id="6"/>Mobile</label> <label class="radio-inline"><input type="radio" name="team" value="Data Services" id="7" />Data Services</label> <label class="radio-inline"><input type="radio" name="team" value="CA" id="8"/>CA</label> <label class="radio-inline"><input type="radio" name="team" value="SAP" id="9"/>SAP</label>
3 個解決方案
解決方案1
1 已采納 2018-04-17 01:58:22
為跨度元素分配一個ID。 然后下面的代碼即可。
$('document').ready(
function(){
$('input:radio').click(
function(){
$( "#spanId" ).html(event.target.value)
}
);
}
);
解決方案2
1 2018-04-17 09:10:08
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name=team]").click(function(){
$("#txtDynamic").text($(this).val());
});
});
</script>
</head>
<body>
<h2><span class="text-navy">Data Input - </span><span id="txtDynamic" class="this is the one to be changed">~</span></h2>
<label class="radio-inline"><input type="radio" name="team" value="CCP" id="1"/>CCP</label>
<label class="radio-inline"><input type="radio" name="team" value="WMP" id="2"/>WMP</label>
<label class="radio-inline"><input type="radio" name="team" value="ELT" id="3"/>ELT</label>
<label class="radio-inline"><input type="radio" name="team" value="Central QA" id="4" />Central QA</label>
<label class="radio-inline"><input type="radio" name="team" value="Global Education" id="5"/>Global Education</label>
<label class="radio-inline"><input type="radio" name="team" value="Mobile" id="6"/>Mobile</label>
<label class="radio-inline"><input type="radio" name="team" value="Data Services" id="7" />Data Services</label>
<label class="radio-inline"><input type="radio" name="team" value="CA" id="8"/>CA</label>
<label class="radio-inline"><input type="radio" name="team" value="SAP" id="9"/>SAP</label>
</body>
</html>
解決方案3
0 2018-04-17 02:12:14
$("input:radio[name='team']").click(function(){ $('span.thisistheonetobechanged').html(this.value); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <h2><span class="text-navy">Data Input - </span><span class="thisistheonetobechanged">~</span></h2> <label class="radio-inline"><input type="radio" name="team" value="CCP" id="1"/>CCP</label> <label class="radio-inline"><input type="radio" name="team" value="WMP" id="2"/>WMP</label> <label class="radio-inline"><input type="radio" name="team" value="ELT" id="3"/>ELT</label> <label class="radio-inline"><input type="radio" name="team" value="Central QA" id="4" />Central QA</label> <label class="radio-inline"><input type="radio" name="team" value="Global Education" id="5"/>Global Education</label> <label class="radio-inline"><input type="radio" name="team" value="Mobile" id="6"/>Mobile</label> <label class="radio-inline"><input type="radio" name="team" value="Data Services" id="7" />Data Services</label> <label class="radio-inline"><input type="radio" name="team" value="CA" id="8"/>CA</label> <label class="radio-inline"><input type="radio" name="team" value="SAP" id="9"/>SAP</label>
您可以在onchange或onclick上進行更改，在本例中，我使用了onclick。
更改內部的單選按鈕文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.