如何在选择不同的单选按钮时更改内容或图表

How to change a content o pararaph when selecting different radio buttons

本文关键字：单选按钮 选择      更新时间：2023-09-26

选择不同单选按钮时，如何更改

段落

的内容？？欢迎Jquery！！

我附上了我的当前代码和一个jSFiddle下面。我想更改.mstotal中的段落。如果需要，你可以将其更改为ID。

HTML

    <label class="ms_price">1.99<span>/year</span><input name="membership-type" type="radio" value="1"/></label>
    <label class="ms_price">2.50<span>/year</span><input name="membership-type" type="radio" value="2"/></label>
    <label class="ms_price">3.00<span>/year</span><input name="membership-type" type="radio" value="3"/></label>
    <label class="ms_price">4.99<span>/year</span><input name="membership-type" type="radio" value="4"/></label>

    <div class="ms_total">
      <p>Membership A - 1 Year:<span>$1.99</span></p>
    </div>

JAVASCRIPT

    $(document).ready(function(){
        $("input[name='membership-type']").live("change", function(){
            if ($(this).val() == "1") {
                 $(".ms_total").text("<p>Membership A - 1 Year:<span>$1.99</span></p>");                  
            } else if ($(this).val() == "2") {
                 $(".ms_total").text("<p>Membership B - 1 Year:<span>$2.50</span></p>");                  
            } else if ($(this).val() == "3") {
                 $(".ms_total").text("<p>Membership C - 1 Year:<span>$3.00</span></p>");                  
            } else if ($(this).val() == "4") {
                 $(".ms_total").text("<p>Membership D - 1 Year:<span>$4.99</span></p>");                  
            }
        }); 
    });

http://jsfiddle.net/vinicius5581/8wn27zej/

您正在使用.live（）来注册在jQuery 1.9中删除的事件处理程序，因此请使用.on（）。还可以使用.html（）来设置html内容。

$(document).ready(function(){
    $("input[name='membership-type']").on("change", function(){
        if ($(this).val() == "1") {
            $(".ms_total").html("<p>Membership A - 1 Year:<span>$1.99</span></p>");                  
        } else if ($(this).val() == "2") {
            $(".ms_total").html("<p>Membership B - 1 Year:<span>$2.50</span></p>");                  
        } else if ($(this).val() == "3") {
            $(".ms_total").html("<p>Membership C - 1 Year:<span>$3.00</span></p>");                  
        } else if ($(this).val() == "4") {
            $(".ms_total").html("<p>Membership D - 1 Year:<span>$4.99</span></p>");                  
        }
    }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="ms_price">1.99<span>/year</span><input name="membership-type" type="radio" value="1"/></label>
<label class="ms_price">2.50<span>/year</span><input name="membership-type" type="radio" value="2"/></label>
<label class="ms_price">3.00<span>/year</span><input name="membership-type" type="radio" value="3"/></label>
<label class="ms_price">4.99<span>/year</span><input name="membership-type" type="radio" value="4"/></label>
<div class="ms_total">
  <p>Membership A - 1 Year:<span>$1.99</span></p>
</div>

如果要使用事件委派，请使用类似的.on(event, selector, handler)格式

$(document).ready(function () {
    $(document).on('change', "input[name='membership-type']", function () {
        if ($(this).val() == "1") {
            $(".ms_total").html("<p>Membership A - 1 Year:<span>$1.99</span></p>");
        } else if ($(this).val() == "2") {
            $(".ms_total").html("<p>Membership B - 1 Year:<span>$2.50</span></p>");
        } else if ($(this).val() == "3") {
            $(".ms_total").html("<p>Membership C - 1 Year:<span>$3.00</span></p>");
        } else if ($(this).val() == "4") {
            $(".ms_total").html("<p>Membership D - 1 Year:<span>$4.99</span></p>");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="ms_price">1.99<span>/year</span>
    <input name="membership-type" type="radio" value="1" />
</label>
<label class="ms_price">2.50<span>/year</span>
    <input name="membership-type" type="radio" value="2" />
</label>
<label class="ms_price">3.00<span>/year</span>
    <input name="membership-type" type="radio" value="3" />
</label>
<label class="ms_price">4.99<span>/year</span>
    <input name="membership-type" type="radio" value="4" />
</label>
<div class="ms_total">
    <p>Membership A - 1 Year:<span>$1.99</span>
    </p>
</div>
1：http://api.jquery.com/live/

相关文章：