選擇不同的單選按鈕時如何更改內容

Question

如何更改內容

段

當選擇其他單選按鈕時？ 歡迎使用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/

Answer 1

您正在使用.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/