Hé les gars, comment puis-je changer le texte à l'intérieur d'une plage lorsqu'un bouton radio est cliqué. Le texte de la plage serait identique à la valeur du bouton radio.

<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>
-1
Xavier 17 avril 2018 à 04:49

3 réponses

Meilleure réponse

Attribuez un ID à l'élément span. et le code suivant fera l'affaire.

$('document').ready(
    function(){
        $('input:radio').click(
            function(){
                $( "#spanId" ).html(event.target.value)
            }
        );  
    }
);
1
user1531038 17 avril 2018 à 01:58
$("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>

Vous pouvez le changer sur onchange ou onclick, pour cet exemple, j'ai utilisé onclick.

0
Wils 17 avril 2018 à 02:12
<!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>
1
Ravi Pipaliya 17 avril 2018 à 09:10