您的位置：首页 > 产品设计 > UI/UE

DOM&&JQ之checkBox获取value

2017-02-09 08:49 274 查看

<!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:;" onclick="submitForm();">DOM</a></p>
<p><a href="javascript:;" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DOM JQ checkBox value

相关文章推荐

新的分享

章节导航