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

【问题标题】：Change heading on the change of radio button status更改单选按钮状态时更改标题
【发布时间】：2016-08-01 04:22:39
【问题描述】：

如何在选中按钮时更改单选按钮的标题和标签文本？这就是我的代码的样子，但是当我按下按钮时没有任何反应。虽然我认为这段代码是正确的：

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

【问题讨论】：

忘记添加脚本部分。感谢您指出这一点。我仍处于 Stackoverflow 体验的开始阶段：D
您的 JavaScript 代码没有问题，但 HTML 有问题。请为您拥有的单选按钮添加值：例如：
这样做了，但它不起作用。我真的很想解决这个问题，因为我不明白出了什么问题
可能是因为这个？ imgur.com/HJw6Ul1 我添加了一些 CSS，所以当我按下它时它是绿色的，当我悬停时它会移动。

标签： javascript html css

【解决方案1】：

确保指向正确的 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(){}); vs script at the bottom of page

检查这个 jsFiddle 一切都按预期工作（你的代码没有改变）： https://jsfiddle.net/fj8ajpaw/

【讨论】：

我没有实际的单选按钮。我有这个 imgur.com/HJw6Ul1 但我仍然可以选择它，所以它应该不是问题，对吧？
嗯...这取决于:) 如果底层 HTML 仍然是单选按钮输入，那么这当然可以。否则，如果这只是按钮，您可以尝试使用“单击”事件处理程序。
它仍然是一个复选框，因为在我按下它后它仍然处于选中状态。但我看不出问题出在哪里。我也尝试使用点击。如果我尝试使用按钮更改文本，它会起作用。当我按下那个按钮时，问题和标签就会改变。
您是否尝试过更改脚本标签的位置？
好吧，你可以把它写在一个 *.js 文件中，并用另一个脚本标签包含它。否则，只需在您的 html 正文末尾添加脚本标签并在那里编写您的 javascript。看这里的例子：jsfiddle.net/fj8ajpaw/1 如果你有很多 javascript，我更喜欢使用外部文件。然后，您将在您的 <head> 中添加另一个 <script src="path/to/your/local/script.js"></script>。

【解决方案2】：

试试这样的：

$(':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>

【讨论】：

我没有实际的单选按钮。我有这个 imgur.com/HJw6Ul1 但我仍然可以选择它，所以它应该不是问题，对吧？
可能只是 CSS 还是有 js？ @VladJ
只有 CSS。我唯一的java写在这里。
您确定在您的页面中加载了jquery 库吗？它在这里工作可能问题出在您的页面上。任何控制台错误？ @VladJ
现在解决了。我在页面底部添加了脚本标签。一切工作整齐。谢谢！