这样做的目的是在选择单选按钮时在占位符div中显示文本。问题是我的Jquery编码很糟糕，而且我不知道我在做什么。
html
<div>
<form>
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
</form>
</div>
<div class="placeholder">
</div>
Jquery的
$(document).ready(function(e) {
$('.menu').click(function () {
if ("#one").checked {
$('.placeholder').html('<h3>Testing</h3>');
}if ("#two").checked {
$('.placeholder').html('<h3>Testing Testing</h3>');
}if ("#three").checked {
$('.placeholder').html('<h3>Testing Testing Testing</h3>');
}
});
});
注意：如果我一次检查所有三个单选按钮，我希望所有三个消息都出现。我注意到在JSfiddle中，我一次只能单击一个单选按钮。如果我单击另一个，则取消选中上一个按钮。我现在正在网站上使用类似的代码，它允许我检查我想要的多少。推理这个？
网站我正在使用单选按钮 - http://bitlamp.wctc.edu/~kschmelzer/js2/LLC/
我试图通过三个不同的＆＃34;页面来检查选项。 （请注意，如果网站没有加载，那么＆＃34;页面＆＃34;只是在按下按钮时隐藏/显示的div。它在一个页面上全部显示）使用下一个按钮，然后打开最后的第四页，它显示了所选单选按钮的内容（文本）。
感谢您的帮助！
答案 0 :(得分：1)
有一些sintax错误，请参阅：http://codepen.io/FuckingLunatic/pen/grvZyd
$('.menu').click(function () {
if ($("#one").is(":checked")) {
$('.placeholder').html('<h3>Testing</h3>');
}if ($("#two").is(":checked")) {
$('.placeholder').html('<h3>Testing Testing</h3>');
}if ($("#three").is(":checked")) {
$('.placeholder').html('<h3>Testing Testing Testing</h3>');
}
});
答案 1 :(得分：1)
添加了代码的更新版本，请检查
$('input:radio[name=option]').click(function () {
$('.placeholder').html();
if ($(this).val() == 'first') {
$('.placeholder').html('<h3>Testing</h3>');
}if ($(this).val() == 'second') {
$('.placeholder').html('<h3>Testing Testing</h3>');
}if ($(this).val() == 'third') {
$('.placeholder').html('<h3>Testing Testing Testing</h3>');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
</form>
</div>
<div class="placeholder">
</div>
答案 2 :(得分：0)
这是我的解决方案：
$(document).ready(function(e) {
$('.menu').click(function () {
var text = '';
switch( this.id ) {
case 'one': text = 'Selected: one';
break;
case 'two': text = 'Selected: two';
break;
case 'three': text = 'Selected: three';
break;
}
$( '.placeholder' ).html( text );
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<div>
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
</div>
<div>
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
</div>
<div>
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
</div>
</form>
</div>
<div class="placeholder">
</div>
答案 3 :(得分：0)
试试这个
$(document).ready(function(e) {
$('#one, #two, #three').change(function(event) {
var value = $(this).val();
if (value == 'first') {
$('.placeholder').html('<h3>Testing</h3>');
} else if (value == 'second') {
$('.placeholder').html('<h3>Testing Testing</h3>');
} else if (value == 'third') {
$('.placeholder').html('<h3>Testing Testing Testing</h3>');
}
})
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<form>
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button
</form>
</div>
<div class="placeholder">
</div>
</body>
</html>
答案 4 :(得分：0)
首先，如果您想创建一个您可能想要使用的多选字段，用户可以选择一个有限数量的选项
<input type="checkbox" />
单选按钮根据其名称字段被视为组，因此您可以为每个选项制定解决方法并使用唯一的名称 - 但这绝对是一个不良做法的示例。
代码
if (one.checked) {
$('.placeholder').html('<h3>Testing</h3>');
}
if ($("#two").prop('checked')) {
$('.placeholder').html('<h3>Testing Testing</h3>');
}
if ($("#three").is(':checked')) {
$('.placeholder').html('<h3>Testing Testing Testing</h3>');
}
您可以使用checked属性或通过jQuery is（：checked）或prop
执行检查是否检查输入你可以在这里找到工作版本： https://jsfiddle.net/pcor7khq/1/
答案 5 :(得分：0)
首先，要修复单选按钮行为，您必须将它们全部放在一个具有相同名称的<FORM>标记中。
其次，你可能根本不需要jQuery。只需使用CSS选择器
input:checked ~ .message{display: block}
答案 6 :(得分：0)
如果您选择复选框而不是单选按钮会更容易。 我认为以下代码将导致您的输出...尝试
<form id="group2">
<input id="1" class="menu" type="radio" value="first">Radio Button here
<input id="2" class="menu" type="radio" value="second">Another Radio button
<input id="3" class="menu" type="radio" value="third">Yet another radio button
</form>
<div class="placeholder">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var marray = [];
$('.menu').click(function () {
if ($("#1").is(":checked")){
var found = jQuery.inArray('1', marray);
if (found < 0)
marray.push('1');
}
if ($("#2").is(":checked")){
var found = jQuery.inArray('2', marray);
if (found < 0)
marray.push('2');
}
if ($("#3").is(":checked")){
var found = jQuery.inArray('3', marray);
if (found < 0)
marray.push('3');
}
var a = marray.sort().toString();
switch(a)
{
case '1' : $('.placeholder').html('<h3>Testing</h3>');
break;
case '2' : $('.placeholder').html('<h3>Testing Testing</h3>');
break;
case '3' : $('.placeholder').html('<h3>Testing Testing Testing</h3>');
break;
case '1,2' : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing</h3>');
break;
case '1,3' : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing Testing</h3>');
break;
case '2,3' : $('.placeholder').html('<h3>Testing Testing</h3><h3>Testing Testing Testing</h3>');
break;
case '1,2,3' : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing</h3><h3>Testing Testing Testing</h3>');
break;
default : $('.placeholder').html('');
break;
}
});
});
function remitem(arr, value) {
var b = '';
for (b in arr) {
if (arr[b] === value) {
arr.splice(b, 1);
break;
}
}
return arr;
}
</script>
检查小提琴.. https://jsfiddle.net/rcvk9Ldw/