获取选中checkbox 的方法

2022-07-23 17:00:35 阅读：151 来源： 互联网

标签：function checkbox value 获取选中 hobbies var hobby document

第一种：用for循环遍历

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox</title>	
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	<p>
		<label for="hobby">Hobby:  
			<input type="checkbox" name="hobby" value="reading" />阅读  
			<input type="checkbox" name="hobby" value="climbing" />爬山  
			<input type="checkbox" name="hobby" value="running" />跑步  
			<input type="checkbox" name="hobby" value="fishing" />钓鱼  
			<input type="checkbox" name="hobby" value="cooking" />做饭  
			</br></br>
			<input type="button" value="Get Value" onclick="getValue()" />
		</label>
	</p>
<span></span>
<script>
function getValue(){
	var hobbies = document.getElementsByName("hobby");
	var value=[];
	for (i=0; i<hobbies.length; i++){
		if (hobbies[i].checked){
			value.push(hobbies[i].value);		
		}
	}
	
	$("span").text(value);;
}
 </script>
</body>
</html>

第二种方法：用each遍历

<script>
function getValue(){
    var hobbies = document.getElementsByName("hobby");
    var value=[];
    $.each(hobbies, function(i){     
    if (hobbies[i].checked) {
        value.push(hobbies[i].value)
    }
 });  
    
    $("span").text(value);;
}
 </script>

标签：function,checkbox,value,获取,选中,hobbies,var,hobby,document
来源： https://www.cnblogs.com/conpi/p/16512415.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

获取选中checkbox 的方法