Question

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

我想在不使用内联JavaScript的情况下不显眼地进行操作

alt text

<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

Answer 2

使用它对我有用

  <script>
function test()
{
    var home= $('input:radio[name=home-location]:checked').val();
    document.getElementById("h1").innerHTML=home;
    var preferred= $('input:radio[name=home-preferred]:checked').val();
   document.getElementById("h2").innerHTML=preferred;
   return false;

}


</script>
<form onsubmit="return test();">
<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" id="h1"></span>and my preferred
        location is: <span class="home-location-result" id='h2'></span>
    </div>
    <input type="submit" value="Populate Values" id="ss" class="submit" />
</form>

如何在populate上显示type =“radio”的选定值？

2 个答案: