更改单选按钮状态时更改标题

Change heading on the change of radio button status

本文关键字：标题 单选按钮 状态      更新时间：2024-04-10

选中按钮时，如何更改单选按钮的标题和标签文本？这就是我的代码的样子，但当我按下一个按钮时，什么都不会发生。虽然我认为这个代码是正确的：

<script type='text/javascript' src="https://code.jquery.com/jquery-  1.12.1.min.js">
$(function () {
// when the radio changes
$(':radio.radio').on('change', function(e) {
// set text of h1 element
$('h1').text('mmmmm');
});
});
</script>
<h1 style='color:black;font-family:"Courier New", monospace;margin-left:-10px;' id='h1'>#1.Question 1</h1>
<div>
                <div>
                        <input type="radio" name="radio" id="radio2" class="radio"/>
                        <label for="radio2" style="color:black;font-family:impact;text-align:center;" id='2'>Answer 1</label>
                </div>
                <div>   
                        <input type="radio" name="radio" id="radio3" class="radio"/>
                        <label for="radio3" style="color:black;font-family:impact;text-align:center;" id='3'>Answer 2</label>
                </div>
                <div>   
                        <input type="radio" name="radio" id="radio4" class="radio"/>
                        <label for="radio4" style="color:black;font-family:impact;text-align:center;" id='4'>Answer 3</label>
                </div>

确保指向正确的jquery：https://code.jquery.com/jquery-1.12.1.min.js（甚至还有1.12.3版本）。

将您的脚本标签插入文档的头部

<head>
    <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.1.min.js">
</head>

否则，在正文末尾的Html下方插入脚本标记

<body>
    <h1>Your H1</h1>
    <div>Your Div with your Inputs</div>
    <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.1.min.js">
</body>

关于这两种方法的区别，请看这里：$（document）.ready（function（）｛｝）；与页面底部的脚本

检查这个jsFiddle，它的一切都按预期工作（您的代码没有任何更改）：https://jsfiddle.net/fj8ajpaw/

试试这样的东西：

$(':radio.radio').each(function(){
$(this).change(function(){
if($(this).attr('id') == 'radio2'){
$(this).siblings('label').text('Answer 1 selected');
$('h1').text('Answer 1 is selected');
} else if ($(this).attr('id') == 'radio3'){
$(this).siblings('label').text('Answer 2 selected');
$('h1').text('Answer 2 is selected');
} else if ($(this).attr('id') == 'radio4') {
$(this).siblings('label').text('Answer 3 selected');
$('h1').text('Answer 3 is selected');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style='color:black;font-family:"Courier New", monospace;margin-left:-10px;' id='h1'>#1.Question 1</h1>
<div>
                <div>
                        <input type="radio" name="radio" id="radio2" class="radio"/>
                        <label for="radio2" style="color:black;font-family:impact;text-align:center;" id='2'>Answer 1</label>
                </div>
                <div>   
                        <input type="radio" name="radio" id="radio3" class="radio"/>
                        <label for="radio3" style="color:black;font-family:impact;text-align:center;" id='3'>Answer 2</label>
                </div>
                <div>   
                        <input type="radio" name="radio" id="radio4" class="radio"/>
                        <label for="radio4" style="color:black;font-family:impact;text-align:center;" id='4'>Answer 3</label>
                </div>

相关文章：