获取checkbox的value值_checkbox value-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43488742/article/details/105645602

本文介绍如何在HTML中利用jQuery有效地获取checkbox选中的value值，为前端开发提供便利。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取checkbox的value值

效果：

源码：

<!DOCTYPE html>  
<html lang="en">  
<head> 
	<meta charset="utf-8">
	<script src="./ceshi/jquery-1.12.2.js"></script>
  <meta charset="UTF-8">
  <title>获取checkbox的value值</title> 
 </head>
 
 <body>
   <input onchange="freshArea()" id='chk1' name='checkbox'  type='checkbox' value='A'/>AA
   <input onchange="freshArea()" id='chk2' name='chk'  type='checkbox' value='B'/>BB
   <input onchange="freshArea()" id='chk3' name='chk'  type='checkbox' value='C'/>CC
   <input onchange="freshArea()" id='chk4' name='chk'  type='checkbox' value='D'/>DD
   <input onchange="freshArea()" id='chk5' name='chk'  type='checkbox' value='E'/>EE
   <input onchange="freshArea()" id='chk6' name='chk'  type='checkbox' value='F'/>FF

   <textarea id="view" value="btn"></textarea>
 </body>
 
 <script>
  function freshArea(){
         var obj = document.getElementsByName('chk');
         var obq = document.getElementsByName('checkbox');
         var s = '';
         var c = '';
         for (var i = 0; i < obj.length; i++) {
             if (obj[i].checked) s += obj[i].value;
        }
        for (var i = 0; i < obq.length; i++) {
             if (obq[i].checked) c += obq[i].value;
        }
        // alert(s == '' ? '你还没有选择任何内容！' : s);
        // console.log(s == '' ? '你还没有选择任何内容！' : s);
        var content = (c == '' ? '这是第一组checkbox' : c) + (s == '' ? '这是第二组checkbox' : s);
		var view = document.getElementById("view");
        view.value =content; 
    }
</script>
</html>