1. 首页
  2. JavaScript

JavaScript 获取选中checkbox复选框的值

复选框可以一次选中多个或者一个,实际应用中可能需要获取选中复选框的值,

由于浏览器的进步和发展,本文不考虑低版本IE,

希望以下代码能对你有所帮助。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.linstudy.com/" />
<title>挚友阳光</title>
<script>
window.onload = () => {
  let odiv=document.getElementById("show");
  let obt=document.getElementById("bt");
  let checks=document.querySelectorAll("#box > input[type=checkbox]");
  obt.onclick= () => {
    let valStr="";
    for(let i=0;i<checks.length;i++){
      if(checks[i].checked==true){
        valStr=valStr+checks[i].value;
      }
    }
    odiv.innerHTML=valStr;
  }
}
</script>
</head>
<body>
  <div id="show"></div>
  <div id="box">
    <input type="checkbox" id="ck" checked value="1"/>
    <input type="checkbox" id="ck" value="2"/>
    <input type="checkbox" id="ck" checked value="3"/>
    <input type="button" value="查看效果" id="bt"/>
  </div>
</body>
</html>

本文来自挚友阳光,本站一部分文章不代表本站立场,不妥请联系本站删除,如若转载,请注明出处:https://www.linstudy.com/article/101.html