JS中怎么循环出checkbox所取的的值

JavaScript07

JS中怎么循环出checkbox所取的的值,第1张

思路：先获取checkbox对象，然后循环判断每个checkbox的checked属性（true为选中，false为未选中）。示例如下：

1、HTML结构

<input type="checkbox" name="test" value="1"/>checkbox-1

<input type="checkbox" name="test" value="2"/>checkbox-2<br>

<input type="checkbox" name="test" value="3"/>checkbox-3

<input type="checkbox" name="test" value="4"/>checkbox-4<br>

<input type='button' value='确定' onclick="fun()"/>

2、javascript代码

function fun(){

var boxes = document.getElementsByTagName("input")

var val = []

for(i=0i<boxes.lengthi++){

if(boxes[i].name=="test" && boxes[i].checked == true){

val.push(boxes[i].value)

}

}

alert(val)

}

3、效果演示

  $(document).ready(function () {

        $("#dcpc_cinema_id").blur(function () {

            var linkId = $("#dcpc_cinema").val()

            if (linkId != "") {

                var trigger = setTimeout(function () {

                    $.ajax({

                        url: "@Url.Action("QuerySalePrice")",

                            data: { linkid: linkId },

                            success: function (data) {

                                var checkBoxValue = data.split(',')

                                var chkhtml = []

                                for (var i = 0 i < checkBoxValue.length i++) {

                                   chkhtml.push('<input type="checkbox"  value="'+checkBoxValue[i]+'"/><label>'+checkBoxValue[i]+'</label>')

                                }

                               $("#输出容器ID").html(chkhtml.join(''))

                            }

                        })

                    }, 1000)

                }

            })

    })

用这个代码

举个例子，比如如下是HTML的结构：

这里推荐使用jQuery库，比较方便。以下是代码：

大致思路就是：先利用name属性值获取checkbox对象，然后循环判断checked属性。（true表示被选中，false表示未选中）

具体解释一下：

首先用document.getElementsByName()这个方法，通过input标签的name属性将input元素获取，并存进obj这个变量值中。然后建一个check_val的数组，通过for循环将input标签的value值存入数组中，这样就可以获取checkbox的选中的多个值。

扩展资料：

Checkbox 对象代表一个 HTML 表单中的 一个选择框。

在 HTML 文档中 <input type="checkbox">每出现一次，Checkbox 对象就会被创建。

您可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById() 。

参考资料：MDN—关于CheckBox属性