jQuery 獲取 radio checkbox 值

weixin_34007020發表於2017-08-26
jQuery

核心 js

$(function () {
    $("#btnSubmit").click(function () {
        // 單選 radio
        var sex = $('input:radio[name="sex"]:checked').val();

        // 多選 checkbox
        var hobbies = []; // js定義陣列
        $('input:checkbox[name="hobby"]:checked').each(function () {
            hobbies.push($(this).val());
        });

        // 向html元素賦值
        $('#info_sex').html(sex);
        $('#info_hobby').html(hobbies);
        $('#result_table').css('display', 'block');
    });
});

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>radioCheck</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnSubmit").click(function () {
                // 單選 radio
                var sex = $('input:radio[name="sex"]:checked').val();

                // 多選 checkbox
                var hobbies = []; // js定義陣列
                $('input:checkbox[name="hobby"]:checked').each(function () {
                    hobbies.push($(this).val());
                });

                // 向html元素賦值
                $('#info_sex').html(sex);
                $('#info_hobby').html(hobbies);
                $('#result_table').css('display', 'block');
            });
        });
    </script>
</head>
<body>

<h3>選擇性別</h3>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

<h3>選擇愛好</h3>
<input type="checkbox" name="hobby" value="籃球">籃球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="網球">網球
<input type="checkbox" name="hobby" value="檯球">檯球
<br>
<br>
<input type="submit" value="提交" id="btnSubmit"/>
<br>
<br>
<table id="result_table" style="display: none">
    <tr>
        <th>性別</th>
        <td id="info_sex"></td>
    </tr>

    <tr>
        <th>愛好</th>
        <td id="info_hobby"></td>
    </tr>
</table>

</table>
</body>
</html>

測試

1877813-6156ca7a5403069a.png

相關文章