这里气候宜人,物产丰富,风景优美,是中国重点风景旅游城市。多明媚的秋天哪,这里,再也不是焦土和灰烬,这是千万座山风都披着红毯的旺盛的国土。那满身嵌着弹皮的红松,仍然活着,傲立在高高的山岩上,山谷中汽笛欢腾,白望在稻田里缓缓飞翔。秋天的美是成熟的——它不像春那么羞涩,夏那么坦露,冬那么内向。
在一些含有批量处理的逻辑页中,复选框 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>
本文javascript获取多个复选框checkbox选中的值到此结束。七月盛夏,瓦蓝瓦蓝的天空没有一丝云彩,火热的太阳炙烤着大地,河里的水烫手,地里的土冒烟。小编再次感谢大家对我们的支持!