通过JQuery获取CheckBox中被选中的value值

#创建几个CheckBox选择框

 <input type="checkbox"  id="test" name="test" value="1">
 <input type="checkbox"  id="test" name="test" value="2">
 <input type="checkbox"  id="test" name="test" value="3">
  <button id="btn">测试</button>

#js代码

  // 获取所有选中的checkbox的值
  $("#btn").click(function () {
    // 获取所有id为test的checkbox对象
    var checkid = $("input[name='test']:checked")
    // 创建一个空的数据,用于存储所有对象中被选中的  对象的value值
    var checkvalue = [];
    // 获取所有CheckBox中被选中的value值
    for (var i = 0; i < checkid.length; i++) {
      if (checkid[i].checked)
        checkvalue.push(checkid[i].value);
    }
    // 打印输出
    console.log(checkvalue)
  })

当然了,不用jq也一样的,修改一下就好

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 内容回顾 JS开发步骤确定事件(onclick鼠标点击事件,onsubmit表单的提交事件,onload页面加载完...
    chcvn阅读 3,462评论 0 3
  • 实战 2:组合多选框组件——CheckboxGroup & Checkbox 在第 5 节,我们完成了具有数据校验...
    中午吃啥_f330阅读 10,416评论 0 0
  • 一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...
    xuguibin阅读 5,641评论 1 7
  • 内容回顾 jQuery的书写步骤引入JQ的包(xxx.js)书写JQ代码$(function(){ JQ代码...
    chcvn阅读 3,582评论 0 5
  • 22、JQ的基础语法、核心原理和项目实战 jQ的版本和下载 jQuery版本 1.x:兼容IE6-8,是目前PC端...
    萌妹撒阅读 5,755评论 0 0

友情链接更多精彩内容