Javascript 如何在jQuery中使用单选按钮更改输入框

我有以下HTML代码：

<div data-role="popup"  >
    <div class="ui-block-a" style="padding-top: 15px;width:24%">
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> <a data-role="button" id="delivery-time-any" onclick="setTimeToAny(this);">Any</a>
 <a data-role="button" id="delivery-time-AM" onclick="setTimeToAM(this);">AM</a>
 <a data-role="button" id="delivery-time-PM" onclick="setTimeToPM(this);">PM</a>

        </fieldset>
    </div>
    <div class="ui-block-b" style="padding-right:5px;width:38%">
        <label for="wo-scheduled-time-window-after">Start Time:</label>
        <input type="text" name="scheduled_time_window_after" id="wo-scheduled-time-window-after" value="" data-mini="true" placeholder="--:--" />
    </div>
    <div class="ui-block-c" style="padding-left:5px;width:38%">
        <label for="wo-scheduled-time-window-before">End Time:</label>
        <input type="text" name="scheduled_time_window_before" id="wo-scheduled-time-window-before" value="" data-mini="true" placeholder="--:--" />
    </div>
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend>Early Pick Up</legend>
        <input type="radio" name="early_pickup" id="wo-early-pick-up-yes" value="1" />
        <label for="wo-early-pick-up-yes">Yes</label>
        <input type="radio" name="early_pickup" id="wo-early-pick-up-no" value="0" checked="checked" />
        <label for="wo-early-pick-up-no">No</label>
    </fieldset

>
</div>

谢谢
 将其添加到javascript中

if(document.getElementById('wo-early-pick-up-yes').checked){
    strtTimeInpt.val('05:00:00');
    endTimeInpt.val('12:00:00');
}
else{
strtTimeInpt.val('07:00:00');
endTimeInpt.val('12:00:00');
} 

请参见fiddle，我将显示任意、AM、PM按钮之一的逻辑，您可以推断其他值

// lets create a convience function to show is early
var isEarly = function () {
   console.log($("[name=early_pickup]:checked").val());
   return $("[name=early_pickup]:checked").val() == 1
}

var setTimeToAM = function (btn) {
    btn = $(btn);
    var popup = btn.closest('.block');
    var strtTimeInpt = popup.find('[name=scheduled_time_window_after]');
    var endTimeInpt = popup.find('[name=scheduled_time_window_before]');
    strtTimeInpt.val('07:00:00');
    // check if isEarly() so we can always set to 5:00
    if (isEarly()) {
        endTimeInpt.val('5:00:00');
    } else {
        endTimeInpt.val('12:00:00');
    }
};
// if the user ever clicks early pickup set it to 5, we could switch out the 5 on no
$("[name=early_pickup]").click(function (evt) {
    var endTimeInpt = $("#wo-scheduled-time-window-before");
    if(isEarly()) {
        endTimeInpt.val('5:00:00');
    }
});

这个问题的关键似乎是抓住单选按钮切换到的内容，并控制集合中的输出。。。功能


例如，在setTimeToAM中：

if ($('#early-pickup :radio:checked').val() == 1) {
    strtTimeInpt.val('05:00:00');
    endTimeInpt.val('12:00:00');
} else {
    strtTimeInpt.val('07:00:00');
    endTimeInpt.val('12:00:00');
}

通过获取单选按钮值（并且您可以在fiddle中用id作为字段集的前缀）

这是你可以在任何地方重复的东西，你知道如果你有一个单选按钮组，实际值可以用
$（“#fieldset:radio:checked'）.val（）抓取。
太棒了！非常感谢。@SaulOrtega这是两个按钮的小提琴，用于“推断”？。。。通过阅读这个问题，你可以知道，OP的第一语言不是英语，你到底为什么要在你的答案中加上“外推”。。。