有人可以给我一个简单的jQuery代码的帮助,当点击不同的收音机底盘然后显示不同的内容。
http://jsfiddle.net/AXsVY/
HTML
<label class="radio inline">
<input id="up_radio" type="radio" name="optionsRadios" value="update" checked>
Update
</label>
<label class="radio inline">
<input id="ov_radio" type="radio" name="optionsRadios" value="overwritten">
Overwritten
</label>
<p id="cont">
sth. here
</p>
的JavaScript
$("#up_radio").click(function(){
if ($("#up_radio").is(":checked")) {
//change to "show update"
$("#cont").value = "show update";
} else if ($("#ov_radio").is(":checked")) {
// change to "show overwritten"
}
});
答案 0 :(得分:13)
使用更改而非点击。点击触发器更改,但用户也可以选中并按箭头键。它始终是change
。
$('input[name="optionsRadios"]').on('change', function(){
if ($(this).val()=='update') {
//change to "show update"
$("#cont").text("show update");
} else {
$("#cont").text("show Overwritten");
}
});
另外,设置值的正确语法是$("#something").val("the value");
,但在这种情况下#cont是div,因此您需要使用.text()
或.html()
。
答案 1 :(得分:2)
根据您的方法解决.. 你可以做更多优化,但我主要是按原样离开:
http://jsfiddle.net/digitalextremist/mqrHs/
以下是小提琴外面的代码:
$(".radio input[type='radio']").on( 'click', function(){
if ($("#up_radio").is(":checked")) {
$("#cont").html( "show update" );
} else if ($("#ov_radio").is(":checked")) {
$("#cont").html( "show overwritten" );
}
});
答案 2 :(得分:0)
$("input:radio[name=optionsRadios]").click(function() {
var value = $(this).val();
if(value="update")
$("#cont").text("show update");
else
$("#cont").text("show update other");
});