如何在jQuery中获取单选按钮的值并设置文本元素的值?

时间:2017-04-26 23:23:09

标签: jquery forms text

如何编写所需的jQuery代码以执行以下操作?

当用户点击任何单选按钮时,它应该: 获取所选单选按钮的id并将该id值存储在您创建的变量中 然后你需要定位页面上的顶部段落(id为$ showPrice的段落)将文本更改为:$ X.XX month 根据所选内容显示正确的值。

我已尝试在各个地方使用$(this).val(),但我仍然对如何执行此操作毫无头绪。

有人可以就如何帮我解决这个问题给我一些建议吗?

非常感谢任何和所有帮助!

肖恩

HTML

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-
    1.8.3.min.js"></script>
    </head>

    <script>

    var idStored = 

    $("input[type=radio][name=product]:checked" ).val();

    </script>

    <body>
    <p id="showPrice">Make a selection:</p>
    <p>
    <label>
      <input type="radio" name="product" value="Digital Access Only" 
    id="$5.00 month">
      Digital Access Only

    </label><br>


    <label>
      <input type="radio" name="product" value="Sunday Delivery Only" 
    id="$5.60 month">
      Sunday Delivery Only
    </label><br>

    <label>
      <input type="radio" name="product" value="Friday - Sunday Delivery" 
    id="$7.00 month">
      Friday - Sunday Delivery
    </label><br>

    <label>
      <input type="radio" name="product" value="Full Access" id="$10.50 
    month">
      Full Access
    </label>
    </p>
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

试试这个。

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var val = $(this).attr('id');
        $('#showPrice').text(val);
    });
});