国产视频app在一些含有批量處理的邏輯頁中,復選框 checkbox 是使用率很高的一個html元素標簽,如果使用 AJAX 形式提交數據的話,那么就需要借助JS獲取到所有被選中的復選框checkbox的值,那該如何操作呢?下面飛鳥慕魚就來說明一下。

js獲取多個被選中復選框checkbox的值

html代碼:

<input type="checkbox" name="test" value="1" /><span>1</span>
<input type="checkbox" name="test" value="2" /><span>2</span>
<input type="checkbox" name="test" value="3" /><span>3</span>
<input type="checkbox" name="test" value="4" /><span>4</span>
<input type="checkbox" name="test" value="5" /><span>5</span>
<input type='button' value='提交' onclick="fun()" />

原生js代碼:

<script>
function fun() {
    //飛鳥慕魚博客
    //獲取所有的 checkbox 屬性的 input標簽
    obj = document.getElementsByName("test");
    check_val = [];
    for (k in obj) {
        //判斷復選框是否被選中
        if (obj[k].checked)
            //獲取被選中的復選框的值
            check_val.push(obj[k].value);
    }
    alert(check_val);
}
</script>

PS:

1、以上的js代碼中,是將所有被選中復選框的值輸入到一個數組中

2、你也可以,使用字符串的形式,組合所有被選中復選框的值

jq獲取checkbox多選的值

有的開發感覺使用JQ要比使用原生的js代碼方便的多,那么下面就給出一個關于使用jq獲取多個被選中復選框的值的例子。

html代碼:

<input type="checkbox" name="test" value="1" /><span>1</span>
<input type="checkbox" name="test" value="2" /><span>2</span>
<input type="checkbox" name="test" value="3" /><span>3</span>
<input type="checkbox" name="test" value="4" /><span>4</span>
<input type="checkbox" name="test" value="5" /><span>5</span>
<!--注意這里的提交按鈕,和上面示例中的不一樣-->
<input type='button' class="pst" value='提交'  />

jq代碼:

<script>
    //使用下面的示例之前,應當先加載jquery.js插件
    $('.pst').on("click", function () {
        var str = "";
        $("input[name='test']:checked").each(function (index, item) {
            if ($("input[name='test']:checked").length - 1 == index) {
                str += $(this).val();
            } else {
                str += $(this).val() + ",";
            }
        });
        alert(str);
    });
</script>