更改单选按钮状态时更改标题
Posted
技术标签:
【中文标题】更改单选按钮状态时更改标题【英文标题】：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>
【问题讨论】：
忘记添加脚本部分。感谢您指出这一点。我仍处于 *** 体验的开始阶段：D 您的 JavaScript 代码没有问题，但 html 有问题。请为您拥有的单选按钮添加值：例如： 这样做了，但它不起作用。我真的很想解决这个问题，因为我不明白出了什么问题 可能是因为这个？ imgur.com/HJw6Ul1 我添加了一些 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
现在解决了。我在页面底部添加了脚本标签。一切工作整齐。谢谢！以上是关于更改单选按钮状态时更改标题的主要内容，如果未能解决你的问题，请参考以下文章