如何区域选择checkbox

洪十二 2009-05-05 02:01:24
小弟最近碰到一个问题，希望高手帮忙。
例如我一页面有9个checkbox，分三行三列显示。
想实现鼠标区域选择，选中多个checkbox。类似文本选择。在区域范围内的checkbox，自动勾选。如图！
期待你的帮助，非常感谢！
...全文
394 31 打赏 收藏 转发到动态 举报
写回复
用AI写文章
31 条回复
切换为时间正序
请发表友善的回复…
发表回复
洪十二 2009-05-06
  • 打赏
  • 举报
 回复
谢谢大家。
yangqidong 2009-05-05
  • 打赏
  • 举报
 回复
选择区域，并设置区域内的复选框选中


<!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>

    <title></title>

    <script language="javascript">

        var downX;

        var downY;

        var isSelecting = false;

        function mUp(ev) {



            var region = document.getElementById("region");

            region.style.display = "none";

            

            if (!ev) ev = window.event;

            if (isSelecting) {

                isSelecting = false;

                var inputs = document.getElementsByTagName("input");

                for (i = 0; i < inputs.length; i++) {

                    if (inputs[i].type == "checkbox") {

                        if (jiechu(downX, downY, ev.clientX, ev.clientY, inputs[i])){

                            inputs[i].checked = true;

                        }

                    }

                }

            }

        }

        function jiechu(ax, ay, bx, by, cb) { 

            var cbx=getX(cb);

            var cby = getY(cb);

            var cbw = cb.clientWidth;

            var cbh = cb.clientHeight;

            if ((cbx - ax) * (cbx - bx) < 0 && (cby - ay) * (cby - by) < 0) return true;

            if ((cbx - ax) * (cbx - bx) < 0 && ((cby + cbh) - ay) * ((cby + cbh) - by) < 0) return true;

            if (((cbx + cbw) - ax) * ((cbx + cbw) - bx) < 0 && (cby - ay) * (cby - by) < 0) return true;

            if (((cbx + cbw) - ax) * ((cbx + cbw) - bx) < 0 && ((cby + cbh) - ay) * ((cby + cbh) - by) < 0) return true;

            return false;

            

        }

        function getX(obj) {

            return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);

        }

        function getY(obj) {

            return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);

        }  

        function mDown(ev) {

            if (!ev) ev = window.event;

            isSelecting = true;

            downX = ev.clientX;

            downY = ev.clientY;



            var region = document.getElementById("region");

            region.style.top = downY + "px";

            region.style.left = downX + "px";

            region.style.display = "block";

        }

        function mMove(ev) {



            if (!ev) ev = window.event;



            var region = document.getElementById("region");

            if (ev.clientX > downX) {

                region.style.left = downX + "px";

            }

            else {

                region.style.left = ev.clientX + "px";

            }

            if (ev.clientY > downY) {

                region.style.top = downY + "px";

            }

            else {

                region.style.top = ev.clientY + "px";

            }

            region.style.width = Math.abs(ev.clientX - downX) + "px";

            region.style.height = Math.abs(ev.clientY- downY) + "px";

        }

    </script>

</head>

<body onmousedown="mDown(event)" onmousemove="mMove(event)" onmouseup="mUp(event)">

    <div id="region" style="position:absolute;top:0px;left:0px;border:1px red solid;display:none"></div>

    <table id="tbl">

        <tr>

            <td>

                <input id="Checkbox1" type="checkbox" />aa

            </td>

            <td>

                <input id="Checkbox2" type="checkbox" />bb

            </td>

            <td>

                <input id="Checkbox3" type="checkbox" />cc

            </td>

        </tr>

        <tr>

            <td>

                <input id="Checkbox4" type="checkbox" />dd

            </td>

            <td>

                <input id="Checkbox5" type="checkbox" />ee

            </td>

            <td>

                <input id="Checkbox6" type="checkbox" />ff

            </td>

        </tr>

        <tr>

            <td>

                <input id="Checkbox7" type="checkbox" />gg

            </td>

            <td>

                <input id="Checkbox8" type="checkbox" />hh

            </td>

            <td>

                <input id="Checkbox9" type="checkbox" />ii

            </td>

        </tr>

    </table>

</body>

</html>
wuyq11 2009-05-05
  • 打赏
  • 举报
 回复
获取鼠标位置event.x ，event.y实现区域选取
查询区域内控件，是checkbox选中
gui0605 2009-05-05
  • 打赏
  • 举报
 回复
不同区域放在不同DIV中，然后用JS来控制选中就好了。
上面XD给的的代码可以修改下用
llsen 2009-05-05
  • 打赏
  • 举报
 回复
用 Js
第一个控制第二三个

function check(fid,sid,tid);

{

    document.getElementById(sid).checked = document.getElementById(fid).checked;

    document.getElementById(tid).checked = document.getElementById(fid).checked;

}
悔说话的哑巴 2009-05-05
  • 打赏
  • 举报
 回复
随便写了哈
for (int i = 0; i <= 2; i++)
{
this.tutornam.Items(i).Selected = true;

}

for (int i = 3; i <= 5; i++)
{
this.tutornam.Items(i).Selected = true;

}

for (int i = 6; i <= 8; i++)
{
this.tutornam.Items(i).Selected = true;

}

antiking 2009-05-05
  • 打赏
  • 举报
 回复
外面套个panel,遍历就好。
lsd123 2009-05-05
  • 打赏
  • 举报
 回复
.
surge0321 2009-05-05
  • 打赏
  • 举报
 回复
学习
ouyang3857116 2009-05-05
  • 打赏
  • 举报
 回复 
<script language="javascript">

		var top,left,bottom,right;



		function beginRecord()

		{

			top = document.body.scrollTop + event.clientY;

			left = document.body.scrollLeft + event.clientX;

		}

		function endRecord()

		{

			right = document.body.scrollLeft + event.clientX;

			bottom = document.body.scrollTop + event.clientY;

			var cbks = document.getElementsByTagName("input");

			for( i = 0; i < cbks.length; i++ )

			{

				if(cbks[i].type == "checkbox")

				{

					var cbk = cbks[i];

					if(cbk.offsetTop >= top && (cbk.offsetTop + cbk.clientHeight <= bottom) && cbk.offsetLeft >= left && (cbk.offsetLeft + cbk.clientWidth) <= right )

					{

						cbk.checked = true;

					}

				}

			}

		}

		document.onmouseup   = endRecord;

		document.onmousedown = beginRecord;

		</script>
试了试，不大好用，要选的范围打些才行。
yh7272hy 2009-05-05
  • 打赏
  • 举报
 回复
写一个JS控制
tulong403 2009-05-05
  • 打赏
  • 举报
 回复
进来学习技术
屌丝女士111 2009-05-05
  • 打赏
  • 举报
 回复
继续关注
我试试了试
还是不行...........
aa1018 2009-05-05
  • 打赏
  • 举报
 回复
写一个js，当鼠标选择某一区域（table的一些行时）让选择的行变色，并遍历table取出变色的行,找到变色行的checkbox的集合，遍历这个集合选中checkbox
洪十二 2009-05-05
  • 打赏
  • 举报
 回复
to zzxap
可能我说的不是很清楚。你的例子是单选的。
我要的是多选，而且多选不是一个一个勾选的，而是希望用区域选择方式。用鼠标选择某一区域。该区域内的checkbox自动勾选。期望效果如图http://www.geoffhong.com/forum/UploadFile/2009-5/20095514411616101.jpg

再次感谢你的帮忙。
Dreamkt 2009-05-05
  • 打赏
  • 举报
 回复
顶!
zzxap 2009-05-05
  • 打赏
  • 举报
 回复
[code=HTML]
以前写过只要一个的，三个原理差不多，参考一下给你。可直接用

第一步：把如下代码加入到<head>区域中
<script>
function checkBoxValidate(cb) {
for (j = 0; j < 8; j++) {
if (eval("document.myform.ckbox[" + j + "].checked") == true) {
document.myform.ckbox[j].checked = false;
if (j == cb) {
document.myform.ckbox[j].checked = true;
}
}
}
}
</script>
第二步：把如下代码加入到<body>区域中
<form name=myform>
<div align="center">选框 1
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(0)">
<br>
选框 2
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(1)">
<br>
选框 3
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(2)">
<br>
选框 4
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(3)">
<br>
选框 5
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(4)">
<br>
选框 6
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(5)">
<br>
选框 7
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(6)">
<br>
选框 8
<input type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(7)">
<br>
</div>
</form>



具体一点是这样的！
<script language="javascript">
function submitform()
{
document.form.action="aaa.asp"
document.form.submit;
return false;
}
<form>
<input type=checkbox name=checkbox value=1>
<input type=checkbox name=checkbox value=2>
<input type=checkbox name=checkbox value=3>
<a href="#" onclick="return submitform()">提交</a>
</form>



可不可以实现只选一个就可以通过,最好能用javascript实现．谢谢了！

<input type="checkbox"id="user_id"onclick="javascript:user()">
<input type="checkbox"id="user_id"onclick="javascript:user()">
<input type="checkbox"id="user_id"onclick="javascript:user()">
...很多
<script language="javascript">
//定义全局变量
var user_id=document.getelementbyid("user_id").checked
function user(){
if(user_id==false){
alert("请选择一个！＠")
}
else{
window.open("sd")

}
}

</script>



//checkbox从check1开始递增命名

<form name=form1>
<input type=checkbox name=check1 onclick="onecheck(this)"><br>
<input type=checkbox name=check2 onclick="onecheck(this)"><br>
<input type=checkbox name=check3 onclick="onecheck(this)"><br>
<input type=checkbox name=check4 onclick="onecheck(this)"><br>
</form>

<script language=javascript>
function onecheck(obj)
{
var checkcount=4; //checkbox数量
var i;
for(i=1; i<=checkcount; i++)
{
if (eval('form1.check' +i)!=obj) eval('form1.check' +i +'.checked=false;');
}
}
</script>
[/CODE]
洪十二 2009-05-05
  • 打赏
  • 举报
 回复
<!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=gb2312" />
<title>MutliSelect CheckBox</title>
</head>
<body onmousedown="down(this)" onmouseup="up(this)">
<input type="checkbox" onmouseover="move(this)">test1</input>
<input type="checkbox" onmousemove="move(this)">test2</input>
<input type="checkbox" onmousemove="move(this)">test3</input>
<br />
<input type="checkbox" onmousemove="move(this)">test4</input>
<input type="checkbox" onmousemove="move(this)">test5</input>
<input type="checkbox" onmousemove="move(this)">test6</input>
<br />
<input type="checkbox" onmousemove="move(this)">test7</input>
<input type="checkbox" onmousemove="move(this)">test8</input>
<input type="checkbox" onmousemove="move(this)">test9</input>

<script language="javascript" type="text/javascript">
var isDown = false;

function up(sender){
isDown = false;
}

function down(sender){
isDown = true;
}

function move(sender){
if(isDown){
sender.checked = true;
}

}

</script>

</body>
</html>
这是之前一个朋友帮忙写的，不过有一点鼠标必须经过checkbox才能选中。而不是checkbox在区域内自动勾选。
供大家参考。
cookies10wen 2009-05-05
  • 打赏
  • 举报
 回复
不错,,,帮顶...
zzxap 2009-05-05
  • 打赏
  • 举报
 回复
用checkboxlist
加载更多回复（11）
javascript 设置某DIV区域内的checkbox复选框
主要用到dom的两个函数document.getElementById(id)和document.getElementsByTagName(name),希望对写复选框全选的虾们有些许帮助。
controllayout:一个在其顶部具有三个区域的android布局，它们分别是icon，text和checkbox，并且它们是可控制的
controllayout:一个在其顶部具有三个区域的android布局，它们分别是icon，text和checkbox，并且它们是可控制的
Vue+Uni-app(uniapp)入门与实战+赠送仿美团点餐小程序
本课程讲了Vue3+Vue2+Uni-app(uniapp)入门基础与实战，其中还重点讲解了ES6、TypeScript这些基础知识，实战由两大价值5000元的真实企业级项目组成，分别是仿京东电商网站和仿美团微信点餐小程序，同时两大项目代码全部赠送，还赠送前后端架构模板，工作中直接使用。VUE和uni-app是目前热门的前端框架，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件和插件，正式上线白屏问题，性能优化、解决iphoneX“刘海”兼容性问题、微信支付、微信授权登录，获取位置在地图上显示，获取用户所在的城市和街道信息，微信小程序发布审核等。对正在工作当中或打算学习VUE和uni-app高薪就业的你来说，那么这门课程便是你手中的葵花宝典。学习技巧：学习当中不要只看，一定要多敲代码，如果碰到某一个知识点不是很明白，不要钻牛角尖，千万不要因为一个点，放弃整个森林，接着往下学，硬着头皮开发项目。只要能亲自开发一个完整的项目，你会发现不明白的地方自然而然就明白了，项目做出来就真正的学会了。此vue和uni-app课程以面试和实战为基础进行讲解，每个知识点都会让你知道在实际项目开发中如何使用，学习后，可以开发大型项目，增强逻辑思维，至少让你拥有3年以上开发经验的实力！代码和ppt均可下载！免费提供《企业级完整实战项目接口文档》，绝对可用
用JavaScript做成的前台树状菜单
利用JavaScript做成的树状菜单，支持在菜单中添加CheckBox选中与否和结点图片与链接。 在做成的JS文件中可设定菜单中结点的打开和关闭图片，结点前的CheckBox存在与否，选择与否，还能设定树状菜单的行间隔长度，初期化状态展开与否，以及TabIndex等属性。 本代码经测试可正常使用。
html常用词汇解释
action 行为 接网站或者一个路径 method 方法 表单提示的方法 type 类型 代表文本框的类型(text、password、submit、radio、checkbox、reset、image、file) reset 重置 submit 提交 checkbox 复选框 radio 单选框 select 下拉菜单 加了selected属性就是默认选择 option 选项 下拉框的选项 textarea 文本区域
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章