每个checkbox都有一个相对应的值,怎么用JavaScript脚本实现选中的checkbox的总值 15
一共有3个checkbox，还有一个textbox。每个checkbox都对应一个label,label中的文本是数值，怎么用JavaScript脚本实现在textbox...
一共有3个checkbox，还有一个textbox。 每个checkbox都对应一个label,label中的文本是数值，怎么用JavaScript脚本实现在textbox中显示选中的checkbox对应的label中文本的数值的总和？？
展开
2个回答
展开全部
方法很多啦，因为只有三个checkbox，所以可以在每个checkbox里面添加JavaScript触发（onclick），每次触发都将三个checkbox的值进行检测相加，然后输出到textbox。
给你一个值为数字的例子，你可以试试看（utf-8编码）：
<!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>
<input onclick="javascript:checkAll()" id="ch1" type="checkbox" value="1" />
1<br />
<input onclick="javascript:checkAll()" id="ch2" name="" type="checkbox" value="2" />
2<br />
<input onclick="javascript:checkAll()" id="ch3" name="" type="checkbox" value="3" />
3<br />
<input id="textBox" type="text" />
<script>
function checkAll(){
for(var i= 1,temp = 0;i<=3;i++){
if(document.getElementById("ch"+i).checked){
temp += Number(document.getElementById("ch"+i).value);
}
}
document.getElementById("textBox").value = temp;
}
</script>
</body>
</html>
给你一个值为数字的例子，你可以试试看（utf-8编码）：
<!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>
<input onclick="javascript:checkAll()" id="ch1" type="checkbox" value="1" />
1<br />
<input onclick="javascript:checkAll()" id="ch2" name="" type="checkbox" value="2" />
2<br />
<input onclick="javascript:checkAll()" id="ch3" name="" type="checkbox" value="3" />
3<br />
<input id="textBox" type="text" />
<script>
function checkAll(){
for(var i= 1,temp = 0;i<=3;i++){
if(document.getElementById("ch"+i).checked){
temp += Number(document.getElementById("ch"+i).value);
}
}
document.getElementById("textBox").value = temp;
}
</script>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="Gallen.Chu">
<script language="javascript">
<!--
function $I(){
return document.getElementById(arguments[0]);
};
function $N()
{
return document.getElementsByName(arguments[0]);
};
function $T()
{
return document.getElementsByTagName(arguments[0]);
};
function calNum()
{
var skys = $N("skys");
var labels = $T("label");
var total = 0;
for(var i=0;i<skys.length;i++)
{
var sky = skys[i];
if (sky.checked == true){
for(var j=0;j<labels.length;j++)
{
var forvalue = labels[j].getAttributeNode("for").value;
if (sky.id == forvalue){
total += parseInt(labels[j].innerText);
}
}
}
}
$I("total").value=total;
}
//-->
</script>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" NAME="skys" id="sky1" onclick="calNum()">太阳<label for="sky1">1</label>
<INPUT TYPE="checkbox" NAME="skys" id="sky2" onclick="calNum()">月亮<label for="sky2">2</label>
<INPUT TYPE="checkbox" NAME="skys" id="sky3" onclick="calNum()">星星<label for="sky3">3</label><br/>
<INPUT TYPE="text" id="total" size="5">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="Gallen.Chu">
<script language="javascript">
<!--
function $I(){
return document.getElementById(arguments[0]);
};
function $N()
{
return document.getElementsByName(arguments[0]);
};
function $T()
{
return document.getElementsByTagName(arguments[0]);
};
function calNum()
{
var skys = $N("skys");
var labels = $T("label");
var total = 0;
for(var i=0;i<skys.length;i++)
{
var sky = skys[i];
if (sky.checked == true){
for(var j=0;j<labels.length;j++)
{
var forvalue = labels[j].getAttributeNode("for").value;
if (sky.id == forvalue){
total += parseInt(labels[j].innerText);
}
}
}
}
$I("total").value=total;
}
//-->
</script>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" NAME="skys" id="sky1" onclick="calNum()">太阳<label for="sky1">1</label>
<INPUT TYPE="checkbox" NAME="skys" id="sky2" onclick="calNum()">月亮<label for="sky2">2</label>
<INPUT TYPE="checkbox" NAME="skys" id="sky3" onclick="calNum()">星星<label for="sky3">3</label><br/>
<INPUT TYPE="text" id="total" size="5">
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
