使用单选按钮使用Jquery显示内容
Using radio buttons to show content using Jquery
这样做的目的是在选择单选按钮时在占位符div中显示文本。问题是我的Jquery编码不好，In不知道我到底在做什么。
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/
我试图通过三个不同的"页面"（注意，如果网站没有加载，"页面"只是按钮按下时隐藏/显示的div。所有内容都在一个页面上）使用下一个按钮检查选项，然后在最后的第四个页面上，它显示所选单选按钮的内容（文本）。
谢谢你的帮助！
存在一些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>');
}
});
添加了代码的更新版本，请检查
$('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>这是我的解决方案：
$(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>试试这个
$(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>首先，单选按钮允许用户从有限的选项中选择一个，如果您想创建一个多选字段，则可能需要使用
<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/
首先，要修复单选按钮的行为，必须将它们全部放在一个同名的<FORM>标记中。
其次，您可能根本不需要jQuery。只需使用CSS选择器
input:checked ~ .message{display: block}
请在此处查看我的示例https://jsfiddle.net/sewy1w71/
如果选择复选框而不是单选按钮，会更容易。。我认为以下代码将产生您的输出。。试试
<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/
相关文章：
- jquery 单选按钮更改问题
- Bootstrap/JQuery-单选按钮组事件函数
- Jquery 单选按钮重复
- 一次取消选中所有JQuery单选按钮集
- 悬停时的 jQuery 单选按钮值
- jQuery单选按钮检查操作不'不要开火
- struts2与jquery单选按钮事件问题
- jquery单选按钮，以及另外两个小问题
- Jquery单选按钮逻辑
- jQuery-单选按钮单击(）
- jQuery单选按钮onChange不起作用
- 使用自定义jQuery单选按钮与CakePHP表单助手
- 奇怪的jQuery单选按钮显示/隐藏bug
- Jquery单选按钮选择器
- jQuery单选按钮更改不起作用
- JQuery单选按钮值检查
- jquery单选按钮未切换
- jQuery单选按钮上的奇怪行为
- 在 IE6 中未选择 JQuery 单选按钮
- jQuery单选按钮功能不能正常工作
