如何使用 jquery 检索单选按钮内的选择标记中的值？答案

【问题标题】：How to retrieve values in select tag within the radio button using jquery?如何使用 jquery 检索单选按钮内的选择标记中的值？
【发布时间】：2015-07-22 21:57:05
【问题描述】：

我有以下 html 单选标签。基本上，它有 3 个单选按钮，用户只能选择一个，我希望 jquery 代码从选中的单选按钮中获取值。

有 3 个单选按钮，一个用于全天，一个用于 N/A，一个用于时间。并且一旦用户点击时间，它可以在标签中选择12:00到20:00之间的时间。

我知道使用.val() 提取其他两个选项的值，但我正在研究如何提取时间单选按钮被选中时的值。

我正在为这个项目使用 Meteor 框架，但我想这是一个 jQuery 问题。

html

<tr>
    <td>Monday</td>
    <td><input type="radio" name="mon" value="all">all day</td>
    <td>
        <input type="radio" name="mon" value="time">between 
        <select name="firstTime">
            <option>Time</option>
            <option value="12">12:00</option>
            <option value="13">13:00</option>
            <option value="14">14:00</option>
            <option value="15">15:00</option>
            <option value="16">16:00</option>
            <option value="17">17:00</option>
            <option value="18">18:00</option>
            <option value="19">19:00</option>
            <option value="20">20:00</option>
        </select>
        to 
        <select name="secondTime">
            <option>Time</option>
            <option value="12">12:00</option>
            <option value="13">13:00</option>
            <option value="14">14:00</option>
            <option value="15">15:00</option>
            <option value="16">16:00</option>
            <option value="17">17:00</option>
            <option value="18">18:00</option>
            <option value="19">19:00</option>
            <option value="20">20:00</option>
        </select>
    </td>
    <td><input type="radio" name="mon" value="n/a">N/A</td>
</tr>

【问题讨论】：

document.getElementById('checkbox').checked 如果选中则返回true。在您的复选框中添加不同的id
有没有办法从

标签： javascript jquery html meteor

【解决方案1】：

你可以这样做：

DEMO

$("input[name=mon]").on("change", function(){
    if(this.value=="time"){
        alert("First Time : " + $('select[name="firstTime"] option:selected').text());
        alert("Second Time : "+$('select[name="secondTime"] option:selected').text());
    }

});

更新

对于这个demo，我正在尝试获取按钮点击的值：

$('.getVal').on('click',function(){
    var selectedoption=$("input[name=mon]:checked").val().trim();
    if(selectedoption=="time"){
        var dispValue="First Time : " + $('select[name="firstTime"] option:selected').text()+ " and Second Time : "+$('select[name="secondTime"] option:selected').text();
        $('.dispSelected').text(dispValue); 
    }
    else
    {
        $('.dispSelected').text(selectedoption + " has been selected"); 
    }

});

【讨论】：

谢谢，但是表单字段中是否有某种获取值类型的方法而不是更改？
因为我希望它是一旦用户提交表单，它会提取值，N/A，全天还是之间的某个时间？
@TomChan。不清楚。你能详细说明一下吗！！如果我理解正确，在提交表单时，您需要检查是否选择了这个时间，如果是，那么选择正确的值？
是的，所以我得到的信息是用户全天可用还是不可用 (N/A) 或在特定时间之间空闲？
没错！！ :) 无论如何快乐编码.. :)

【解决方案2】：

当它们发生变化时，你可以得到它们的值，例如：

jQuery("input[type=radio]").on("change", function(){
  alert(this.value); //Will show the value of the selected radio
});

要获取select 值，您可以获取它们，例如，当selects 更改或radios 更改时。检查这个fiddle。

【讨论】：

和选择的时间？
对不起，我误解了你的问题。让我编辑我的答案。

【解决方案3】：

如果您想在提交表单时获取值，请使用以下代码：

$('form').on('submit', function( e ) {
    e.preventDefault();
    var formData = $(this).serialize();//this holds all the form data
    ......
});

但要确保仅在选择 time 单选按钮时包含时间，您需要以下代码：

$('input[name=mon]').on('change', function() {
    $('select[name=firstTime], select[name=secondTime]').prop('disabled', this.value != 'time');
});

【讨论】：