DOM&&JQ之checkBox获取value

最新推荐文章于 2022-09-23 14:08:13 发布

相思比梦长

最新推荐文章于 2022-09-23 14:08:13 发布

阅读量676

点赞数 1

分类专栏： WEB前端文章标签： DOM JQ checkBox value

本文链接：https://blog.csdn.net/netuser1937/article/details/54943327

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<form name='form1' method="post" id="form1" action="XXOO">
  <input type="hidden" id="checkIds" name="checkIds" value="" />
  <label>
    <input name="tid" type="checkbox" id="tid" value="1" />
  </label>
  <label>
    <input name="tid" type="checkbox" id="tid" value="2" />
  </label>
  <label>
    <input name="tid" type="checkbox" id="tid" value="3" />
  </label>
  <label>
    <input name="tid" type="checkbox" id="tid" value="4" />
  </label>
  <label>
    <input name="tid" type="checkbox" id="tid" value="5" />
  </label>
</form>
<p><a href="javascript:;" οnclick="submitForm();">DOM</a></p>
<p><a href="javascript:;" οnclick="submitForm2();">JQ</a></p>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script language="javascript">
//JS原生DOM方式获取选中的多选框的
function submitForm(){
	var chestr = "";
	var str = document.getElementsByName("tid");
	for (i=0;i<str.length;i++)
	{
	  if(str[i].checked == true)
	  {
			chestr+=str[i].value+",";
	  }
	}
	if(chestr == "")
	{
	  alert("请先选择一件商品！");
	}
	else
	{
	  document.getElementById("checkIds").value=chestr.substring(0,chestr.length-1);
	  alert(document.getElementById("checkIds").value);
	  document.getElementById("form1").submit();
	}	
}

//JQ方式获取选中的多选框的值
function submitForm2(){
	 var chestr = "";
	 $("input[name='tid']:checked").each(function(i) {
		   if(0==i){
			chestr = $(this).val();
		   }else{
			chestr += (","+$(this).val());
		   }
	  });
	  
	if(chestr == "")
	{
	  alert("请先选择一件商品！");
	}
	else
	{
	  $("#checkIds").val(chestr);
	  alert($("#checkIds").val());
	  $("#form1").submit();
	}
}
</script>
</body>
</html>