使用javascript从复选框中获取值[重复]答案

【问题标题】：Getting values from checkboxes using javascript [duplicate]使用javascript从复选框中获取值[重复]
【发布时间】：2013-06-29 05:07:38
【问题描述】：

我在尝试从选中的checkboxes 中获取值时遇到问题。我可以从radio buttons 中获取值，但无法从复选框中获取值。

代码

<html>
<head>
    <script language="javascript">

        function subscription() {
            var subamount = document.querySelector('input[name="sublvl"]:checked').value;
            $('input:checked').each(function () {
                // To pass this value to its nearby hidden input
                $(this).parent('td').next('input').val($(this).val());
            });

            alert(subamount);
        }

    </script>
</head>
<body>
    <h3>
        <span style="color: #ff0000;">Step 1: Choose your donation amount</span></h3>
    <form name="pclvl" action="#" method="get">
    <label>
        <input type="radio" name="sublvl" value="10" />
        Pathfinder Chronicler Supporter $10.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="15" />
        Pathfinder Chronicler Bronze Supporter $15.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="20" />
        Pathfinder Chronicler Silver Supporter $20.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="30" />
        Pathfinder Chronicler Gold Supporter $30.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="40" />
        Pathfinder Chronicler Platinum Supporter $40.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="45" />
        Pathfinder Chronicler Jewel Supporter $45.00 USD</label>
    <br>
    <label>
        <input type="radio" name="sublvl" value="50" />
        Pathfinder Chronicler Diamond Supporter $50.00 USD</label>
    <br>
    </p>
    </form>
    <h3>
        <span style="color: #ff0000;">Step 2: Choose your donation reward</span></h3>
    <p>
        <form name="donations" action="#" method="get">
        <input type="checkbox" name="reward" value="1" />
        Vol. I Package ($10 value) A print copy of Pathfinder Chronicler Volume I (shipping
        charges not included)<br />
        <input type="checkbox" name="reward" value="2" />
        Vol. II Package ($10 value) A print copy of Pathfinder Chronicler Volume II (shipping
        charges not included)
        <br />
        <input type="checkbox" name="reward" value="3" />
        Vol. III Package ($10 value) A print copy of Pathfinder Chronicler Volume III (shipping
        charges not included)
        <br />
        <input type="checkbox" name="reward" value="4" />
        Vol. I Package + Vol. I Poster ($15 value) A print copy of Pathfinder Chronicler
        Volume I with a 11x17 Poster of Volume I Source Art by Eva Widermann (shipping charges
        not included)<br />
        <input type="checkbox" name="reward" value="5" />
        Vol. II Package + Vol. II Poster ($15 value) A print copy of Pathfinder Chronicler
        Volume II with a 11x17 Poster of Volume II Source Art by Carolina Eade (shipping
        charges not included)<br />
        <input type="checkbox" name="reward" value="6" />
        Vol. III Package + Vol. III Poster ($15 value) A print copy of Pathfinder Chronicler
        Volume II with a 11x17 Poster of Volume III Source Art by Carolina Eade (shipping
        charges not included)<br />
        <input type="checkbox" name="reward" value="7" />
        Complete Package ($50 value) Print copies of Pathfinder Chronicler Volume I, II
        and III with 11x17 Posters of Volume I, II, III, and IV Source Art, by Eva Widermann
        and Carolina Eade (shipping charges not included)<br />
        <input type="checkbox" name="poster" value="poster" />
        Poster Package ($20 value) 11x17 Posters of Volume I, II, III, and IV Source Art,
        by Eva Widermann and Carolina Eade (shipping charges not included)<br />
    </p>
    <input type="button" value="test click" onclick="subscription(this.form)">
    </form>
</body>
</html>

【问题讨论】：

.next('input') 应该是.next('input:hidden')。但是你为什么要复制那个，你的复选框没有提交吗？
您打算如何处理reward 的多项选择？
你为什么同时使用jQuery 和原生DOM选择器？
在这一行中：$(this).parent('td').next('input').val($(this).val()); 您正在寻找父 <td> 元素，但您的 html 没有任何 <td> 元素。
好的，很抱歉我已经离开网络编程一段时间了。解决此问题的最佳方法是什么。

标签： javascript jquery html

【解决方案1】：

如果你打算使用 jQuery，不妨坚持使用 jQuery。由于您已经离开网络编程一段时间并且可能会使用复习，因此我包括了很多 cmets。

编辑：刚刚看到您的编辑，更改为获取复选框

function subscription() {

    // Create an array of checkbox inputs that are checked
    var $inputs = $('input[type="checkbox"]:checked');

    // Iterate through all the checked inputs, you could use
    // jQuery's $each here but it's horribly slow
    for (var i = 0; i < $inputs.length; i++) {

        // Assign the value
        var inputValue = $($inputs[i]).val();

        // Please note I cannot see the hidden field on your markup, but let's
        // just target the first hidden field available if that is what you want
        // If you include the hidden field on the markup, we could target it
        // specifically also...
        $('input:hidden').val(inputValue);

    }
}

【讨论】：

我将如何输出这些？