选中单选按钮时,jQuery更改内容

时间:2022-11-20 14:26:19

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/

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/

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");

    });