Javascript 使用Jquery使用单选按钮显示内容

这样做的目的是在选择单选按钮时在占位符div中显示文本。问题是我的Jquery编码很糟糕，我不知道我到底在做什么

html

单选按钮在这里
另一个单选按钮
还有一个单选按钮

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>');
        }
    });

});

$（文档）.ready（函数（e）{
$（'.menu'）。单击（函数（）{
如果（“#一”）。选中{
$（'.placeholder'）.html（'Testing'）；
}如果（“#2”）。选中{
$（'.placeholder'）.html（'Testing'）；
}如果（“#三”）。选中{
$（'.placeholder'）.html（'Testing'）；
}
});
});

注意：如果我同时检查所有三个单选按钮，我希望所有三条消息都显示出来。我注意到在JSFIDLE中，一次只能单击一个单选按钮。如果我单击另一个按钮，它将取消选中“上一个”按钮。我正在使用类似的代码在网站上我目前正在工作，它允许我检查，因为我想很多。原因何在

网站Im正在使用单选按钮-

我试图通过三个不同的“页面”（注意，如果网站没有加载，“页面”仅仅是隐藏/显示在按钮上的div。它们都在一个页面上）使用下一个按钮检查选项，然后在最后的第四个页面上，它显示所选单选按钮的内容（文本）

---

谢谢你的帮助

存在一些sintax错误，请参见：

$（'.menu'）。单击（函数（）{
如果（$（“#一”）是（“：选中”））{
$（'.placeholder'）.html（'Testing'）；
}如果（$（“#2”）。是（“：选中”））{
$（'.placeholder'）.html（'Testing'）；
}如果（$（“#三”）是（“：选中”））{
$（'.placeholder'）.html（'Testing'）；
}
});

存在一些sintax错误，请参见：

$（'.menu'）。单击（函数（）{
如果（$（“#一”）是（“：选中”））{
$（'.placeholder'）.html（'Testing'）；
}如果（$（“#2”）。是（“：选中”））{
$（'.placeholder'）.html（'Testing'）；
}如果（$（“#三”）是（“：选中”））{
$（'.placeholder'）.html（'Testing'）；
}
});

添加了代码的更新版本，请检查

$（'input:radio[name=option]'）。单击（函数（）{
$（'.placeholder'）.html（）；
if（$（this）.val（）=='first'）{
$（'.placeholder'）.html（'Testing'）；
}if（$（this）.val（）=='second'）{
$（'.placeholder'）.html（'Testing'）；
}if（$（this）.val（）=='third'）{
$（'.placeholder'）.html（'Testing'）；
}
});

单选按钮在这里
另一个单选按钮
还有一个单选按钮
添加了代码的更新版本，请检查


$（'input:radio[name=option]'）。单击（函数（）{
$（'.placeholder'）.html（）；
if（$（this）.val（）=='first'）{
$（'.placeholder'）.html（'Testing'）；
}if（$（this）.val（）=='second'）{
$（'.placeholder'）.html（'Testing'）；
}if（$（this）.val（）=='third'）{
$（'.placeholder'）.html（'Testing'）；
}
});

单选按钮在这里
另一个单选按钮
还有一个单选按钮
这是我的解决方案：


$（文档）.ready（函数（e）{
$（'.menu'）。单击（函数（）{
var text=''；
开关（this.id）{
案例“一”：文本=“所选：一”；
打破
案例'two'：文本='Selected:two'；
打破
案例“三”：文本=“所选：三”；
打破
}
$（'.placeholder'）.html（文本）；
});
});

单选按钮在这里
另一个单选按钮
还有一个单选按钮
这是我的解决方案：


$（文档）.ready（函数（e）{
$（'.menu'）。单击（函数（）{
var text=''；
开关（this.id）{
案例“一”：文本=“所选：一”；
打破
案例'two'：文本='Selected:two'；
打破
案例“三”：文本=“所选：三”；
打破
}
$（'.placeholder'）.html（文本）；
});
});

单选按钮在这里
另一个单选按钮
还有一个单选按钮
试试这个


$（文档）.ready（函数（e）{
$（'一，'二，'三'）.change（函数（事件）{
var值=$（this.val（）；
如果（值=='first'）{
$（'.placeholder'）.html（'Testing'）；
}else if（值=‘秒’）{
$（'.placeholder'）.html（'Testing'）；
}else if（值='third'）{
$（'.placeholder'）.html（'Testing'）；
}
})
});

单选按钮在这里
另一个单选按钮
还有一个单选按钮
试试这个


$（文档）.ready（函数（e）{
$（'一，'二，'三'）.change（函数（事件）{
var值=$（this.val（）；
如果（值=='first'）{
$（'.placeholder'）.html（'Testing'）；
}else if（值=‘秒’）{
$（'.placeholder'）.html（'Testing'）；
}else if（值='third'）{
$（'.placeholder'）.html（'Testing'）；
}
})
});

单选按钮在这里
另一个单选按钮
还有一个单选按钮
首先，如果您想创建一个可能要使用的多选字段，用户可以通过单选按钮从有限的选项中选择一个

<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>');
}

if（一个选中）{
$（'.placeholder'）.html（'Testing'）；
}
if（$（“#2”）.prop（'选中'））{
$（'.placeholder'）.html（'Testing'）；
}
如果（$（“#三”）。是（':checked'））{
$（'.placeho）
<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>');
}

input:checked ~ .message{display: block}

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