如何在选中时获得单选按钮的值?

时间:2014-04-29 06:50:08

标签: jquery

我的html代码是这样的。从这段代码中,当用户选择(选中)该值时,我想获得单选按钮值。如何获得这个价值。当用户点击按钮或必须调用该函数时,我得到了解决方案。但是当用户检查它时,我需要使用jQuery解决方案。

HTML code:

<div id="Report_Name" class="leaf">
    <fieldset class="control select multiple" title="">
        <legend>* Select Report Name</legend>
        <ul class="list inputSet sizable">                <li>
                <div class="control radio">
                    <input checked="checked" class="" id="Report_Name1" type="radio" name="Report_Name_option" value="4">
                    <label class="wrap" for="Report_Name1" title="">
                        ALL&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Report_Name2" type="radio" name="Report_Name_option" value="1">
                    <label class="wrap" for="Report_Name2" title="">
                        Cash&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Report_Name3" type="radio" name="Report_Name_option" value="2">
                    <label class="wrap" for="Report_Name3" title="">
                        FDR&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Report_Name4" type="radio" name="Report_Name_option" value="3">
                    <label class="wrap" for="Report_Name4" title="">
                        Summary&nbsp;
                    </label>
                </div>
            </li>
            &nbsp;</ul>
    </fieldset>
    <span class="warning"></span>
    <div class="resizeOverlay hidden"></div>
    <div class="sizer vertical" style="position: relative;"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></div>
</div>

5 个答案:

答案 0 :(得分:1)

您需要使用单选按钮绑定.change()事件。然后,您可以使用:checked选择器查找所选的无线电选项。

实施例

$(document).ready(function () {
    $(':radio[name="Report_Name_option"]').change(function () {
        alert($(':radio[name="Report_Name_option"]:checked').val())
    })
});

DEMO

答案 1 :(得分:1)

您需要使用单选按钮附加.change事件,之后您可以使用以下方式获取已检查单选按钮的值:已选中

在下面的代码中,我们按名称过滤单选按钮并将更改事件附加到它,然后找到已检查的无线电值

$("input:radio[name=Report_Name_option]").change(function(){
  console.log($('input:radio[name=Report_Name_option]:checked').val());

});

答案 2 :(得分:0)

快速搜索后,我找到了一个非常完整的答案。无论如何你想尝试这样的事情:

$("input:radio[name=Report_Name_option]").click(function() {
    var x = $(this).val();
});

我希望这有帮助!

答案 3 :(得分:0)

你可以试试这个:

$('#Report_Name').find('[type="radio"]').on('change', function(){
   console.log(this.value);
});

您必须在此 radios div中找到#Report_Name并向其应用 .change() 事件并获取值那台收音机由于您默认选择了一个收音机,因此您可以通过在加载时触发更改事件来获取它。


Demo

答案 4 :(得分:0)

示例: Demo in JsBin

$(function() {
  $(".inputSet input[type=radio]").change(function() {
    // for every change on the radio selection
    checkRadioSelection();
  });

  // so you get the default selection
  checkRadioSelection();
});

function checkRadioSelection()
{
  var r = $(".inputSet input[type=radio]:checked");
  $(".warning").text("You have selected: " + r.val() );
}