获取选中checkbox 的方法

2022/7/23 23:28:37

编程Tag： checkbox function value var 获取选中 document HOBBY hobbies

本文主要是介绍获取选中checkbox 的方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

第一种：用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>

这篇关于获取选中checkbox 的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

获取选中checkbox 的方法

相关编程文章