如何使用jquery在单选按钮内的select标签中检索值？

Question

I have the following html radio tags. Basiclly, it has 3 radio button and the user can only pick one and I want the jquery code to pick up the value from the checked radio.

There is 3 radio button, one for all day, one for N/A and one for time. And once user click time, it can selected the time between 12:00 to 20:00 in the tag.

I know that using .val() for extract the value for the other two options, but I am figuring out how to extract the values on the times when the time radio button is selected.

I am using Meteor framework for this project, but i guess this is a jQuery question.

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>

Answer 1

You can do as below:

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());
    }

});

---

UPDATE

For this demo I am trying to get values on button click:

$('.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"); 
    }

});

Answer 2

You can get their value when they change, for example:

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

For getting the select values, you can get them, for example, when the selects change or when the radios change. Check this fiddle .

Answer 3

If you want to get the values when the form is submitted use the following code:

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

But to ensure that times are only included when the time radio button is selected you need the following code:

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