Question

嘿，伙计们，当单击单选按钮时，如何更改跨度内的文本。跨度的文本将与单选按钮的值相同。

<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>

Answer 1

将Id分配给span元素。以下代码可以。

$('document').ready(
    function(){
        $('input:radio').click(
            function(){
                $( "#spanId" ).html(event.target.value)
            }
        );  
    }
);

Answer 2

<!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>

Answer 3

$("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。

单击单选按钮时跨度文本更改

3 个答案: