javascript - 如何在填充时显示类型为 ="radio"的选定值？

Question

单击“填充值”按钮后，按钮下方的 div 应分别填充首选位置和主位置的选定单选按钮的值

我想在不使用内联 JavaScript 的情况下低调地完成此操作

<div id="form_block">
    <div class="home-location">
        <ul>
            <li>Home Location</li>
            <li>
                <input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
                    for="home-india">India</label></li>
            <li>
                <input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
                    for="home-usa">USA</label></li>
        </ul>
    </div>
    <div class="prefer-location">
        <ul>
            <li>Preferred Location</li>
            <li>
                <input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
                    for="preferred-india">India</label></li>
            <li>
                <input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
                    for="preferred-usa">USA</label></li>
        </ul>
    </div>
    <div class="result">
        My Home Location is: <span class="home-location-result"></span>and my preferred
        location is: <span class="home-location-result"></span>
    </div>
    <input type="submit" value="Populate Values" id="ss" class="submit" />

Answer 1

修改了您的 HTML。为您的结果范围提供了 id 属性

$(function(){
    $("#ss").click(function(){
        // Find all input elements with type radio which are descendants of element with id `form`
        var filt = $("#form_block input:radio");
        // Apply a filter to the above object with `name='home-location'` and checked and get the value
        var homeVal = filt.filter("[name='home-location']:checked").val();
        // same as above
        var preferredVal = filt.filter("[name='home-preferred']:checked").val();
        // Set the text of the element width id `home-location-result' with the computed value
        $("#home-location-result").text(homeVal);
        // same as above
        $("#preferred-location-result").text(preferredVal);

        return false;
    });
});

查看working demo