需求个js 实现点击文字选中复选框特效
要js，不要label<inputtype="checkbox"id="bac_1"class="bacbox"/><labelfor="bac_1"></label>精...
要js ，不要label
<input type="checkbox" id="bac_1" class="bacbox" /><label for="bac_1"></label>精美
因为label 我做了其他css3样式了，现在想点击文字 复选框页可以 选中或者取消。
例如这个：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>点击文字选中checkbox复选框</title>
</head>
<script language="javascript">
function selectcheckbox()
{
document.form1.check1.checked=!document.form1.check1.checked;
}
</script>
<body>
<form name="form1" method="post">
<input type="checkbox" name="check1" value="0" /> <a onclick="selectcheckbox()" >请点击我</a>
<input type="checkbox" name="check1" value="0" /> <a onclick="selectcheckbox()" >请点击我</a
</form>
</body>
</html>
但是这个例子 ，只能单条起作用，多条就无效了，要添加js才行。
我需求的是不用修改添加js 可以多个也有效的方法。 展开
<input type="checkbox" id="bac_1" class="bacbox" /><label for="bac_1"></label>精美
因为label 我做了其他css3样式了，现在想点击文字 复选框页可以 选中或者取消。
例如这个：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>点击文字选中checkbox复选框</title>
</head>
<script language="javascript">
function selectcheckbox()
{
document.form1.check1.checked=!document.form1.check1.checked;
}
</script>
<body>
<form name="form1" method="post">
<input type="checkbox" name="check1" value="0" /> <a onclick="selectcheckbox()" >请点击我</a>
<input type="checkbox" name="check1" value="0" /> <a onclick="selectcheckbox()" >请点击我</a
</form>
</body>
</html>
但是这个例子 ，只能单条起作用，多条就无效了，要添加js才行。
我需求的是不用修改添加js 可以多个也有效的方法。 展开
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>点击文字选中单选框，sky整理收集，站长特效欢迎您。</title>
<style type="text/css">
<!--
body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
-->
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<center>
<table border=0 bordercolor=#111111 borderlight=green style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tr><td align=center>
<font size=3 color=#FF0033 face="Arial, Helvetica, sans-serif">
<strong style="font-weight: 400">下面为脚本显示区<br>
</strong></font></td></tr><tr><td align=center width=300> <p>
<span style="font-size: 9pt">看看下面的选择框，似乎没有什么不同的。微妙之处在于，选择项目时不必非得在框内点击鼠标了，在文本上选择即可。不信试一试吧。</span></p>
<form>
<label for="check1"><span style="font-size: 9pt">经常来这里</span></label><span style="font-size: 9pt">
<input type="CHECKBOX" id="check1" value="often" name="checkoften">
<label for="check2">偶尔来看看</label>
<input type="CHECKBOX" id="check2" value="seldom" name="checkseldom">
</span>
</form>
</td></tr></table></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>点击文字选中单选框，sky整理收集，站长特效欢迎您。</title>
<style type="text/css">
<!--
body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
-->
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<center>
<table border=0 bordercolor=#111111 borderlight=green style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tr><td align=center>
<font size=3 color=#FF0033 face="Arial, Helvetica, sans-serif">
<strong style="font-weight: 400">下面为脚本显示区<br>
</strong></font></td></tr><tr><td align=center width=300> <p>
<span style="font-size: 9pt">看看下面的选择框，似乎没有什么不同的。微妙之处在于，选择项目时不必非得在框内点击鼠标了，在文本上选择即可。不信试一试吧。</span></p>
<form>
<label for="check1"><span style="font-size: 9pt">经常来这里</span></label><span style="font-size: 9pt">
<input type="CHECKBOX" id="check1" value="often" name="checkoften">
<label for="check2">偶尔来看看</label>
<input type="CHECKBOX" id="check2" value="seldom" name="checkseldom">
</span>
</form>
</td></tr></table></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
追问
你这个使用label 来的。
偶尔来看看 点击这里
如果 我后面在加文字“点击这里”，那怎么实现也选中复选框。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你只要把复选框放在a标签的前面就可以了
<script>
function sb(obj){
if(obj.previousElementSibling.checked==true){
obj.previousElementSibling.checked=false;
}else{
obj.previousElementSibling.checked=true;
}
}
</script>
<form name="form1" method="post">
<input type="checkbox" name="check1" value="0"/> <a onclick="sb(this)">请点击我</a>
<input type="checkbox" name="check1" value="0" /> <a onclick="sb(this)">请点击我</a
</form>
<script>
function sb(obj){
if(obj.previousElementSibling.checked==true){
obj.previousElementSibling.checked=false;
}else{
obj.previousElementSibling.checked=true;
}
}
</script>
<form name="form1" method="post">
<input type="checkbox" name="check1" value="0"/> <a onclick="sb(this)">请点击我</a>
<input type="checkbox" name="check1" value="0" /> <a onclick="sb(this)">请点击我</a
</form>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把复选框放在label里就好了
如：
<label>
<input runat="server" type="checkbox" id="Checkbox1" value="0"/>我是复选框
</label>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
