can someone give me help on a simple jQuery code that when clicked different radio bottuon then display the different content.
http://jsfiddle.net/AXsVY/
有人可以给我一个简单的jQuery代码的帮助,当点击不同的无线电bottuon然后显示不同的内容。 http://jsfiddle.net/AXsVY/
HTML
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
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"
}
});
3 个解决方案
#1
12
http://jsfiddle.net/AXsVY/2/
Use on change not on click. Click triggers change, but the user could also tab across and hit an arrow key. It will always change
.
用于更改而非点击。点击触发器更改,但用户也可以选中并按箭头键。它总会改变。
$('input[name="optionsRadios"]').on('change', function(){
if ($(this).val()=='update') {
//change to "show update"
$("#cont").text("show update");
} else {
$("#cont").text("show Overwritten");
}
});
Also, the correct syntax to set a value is $("#something").val("the value");
but in this case #cont is a div, so you need to use .text()
or .html()
.
另外,设置值的正确语法是$(“#something”)。val(“value”);但在这种情况下#cont是一个div,所以你需要使用.text()或.html()。
#2
2
Solved, based on your approach.. There are more optimizations you could do, but I left it mostly as-is:
解决了,根据你的方法..你可以做更多的优化,但我主要是按原样离开:
http://jsfiddle.net/digitalextremist/mqrHs/
http://jsfiddle.net/digitalextremist/mqrHs/
Here's the code outside a fiddle:
这是小提琴外面的代码:
$(".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" );
}
});
#3
0
$("input:radio[name=optionsRadios]").click(function() {
var value = $(this).val();
if(value="update")
$("#cont").text("show update");
else
$("#cont").text("show update other");
});
#1
12
http://jsfiddle.net/AXsVY/2/
Use on change not on click. Click triggers change, but the user could also tab across and hit an arrow key. It will always change
.
用于更改而非点击。点击触发器更改,但用户也可以选中并按箭头键。它总会改变。
$('input[name="optionsRadios"]').on('change', function(){
if ($(this).val()=='update') {
//change to "show update"
$("#cont").text("show update");
} else {
$("#cont").text("show Overwritten");
}
});
Also, the correct syntax to set a value is $("#something").val("the value");
but in this case #cont is a div, so you need to use .text()
or .html()
.
另外,设置值的正确语法是$(“#something”)。val(“value”);但在这种情况下#cont是一个div,所以你需要使用.text()或.html()。
#2
2
Solved, based on your approach.. There are more optimizations you could do, but I left it mostly as-is:
解决了,根据你的方法..你可以做更多的优化,但我主要是按原样离开:
http://jsfiddle.net/digitalextremist/mqrHs/
http://jsfiddle.net/digitalextremist/mqrHs/
Here's the code outside a fiddle:
这是小提琴外面的代码:
$(".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" );
}
});
#3
0
$("input:radio[name=optionsRadios]").click(function() {
var value = $(this).val();
if(value="update")
$("#cont").text("show update");
else
$("#cont").text("show update other");
});