html鼠标选择一个区域，把该区域checkbox 都选中

最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量561 收藏
点赞数
文章标签： 前端 xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/kdyang/archive/2009/05/13/1455656.html
版权

Q: html鼠标选择一个区域，把该区域checkbox 都选中

A:

效果一般

ContractedBlock.gif ExpandedBlockStart.gif Code
<!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>

转载于:https://www.cnblogs.com/kdyang/archive/2009/05/13/1455656.html

weixin_30569033
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html div鼠标选中状态,html+css+javascript实现跟随鼠标移动显示选中效果
weixin_36480255的博客
05-30 1023
1，显示效果：2,html结构End customer get product1 Log in EFOSE website and present installation or maintenance requirements 2EFOSE prefer contact service point3 Customer contact service point to get service4 C...
checkbox 自定义样式 android,CheckBox自定义样式和扩大点击区域【Android】
weixin_42451611的博客
05-25 458
我们总是太急，没有耐心。二十岁青春出头的样子就想要有着四十岁的阅历与财富，自然，不是每个吃过苦的人都会得到回报。人总会遇到挫折，总有不被人理解、低声下气的时候。要知道胜利只属于那些有耐心的人，所以不要急，慢慢来。多一点耐心吧。​Android中CheckBox的使用频率是相当高的，但是很多时候系统自带的样式和效果并不能满足实际项目需求，所以知道怎么去自定义样式和扩大CheckBox点击区域还是相当...
第十五课 页面功能区域实战（模态框）-011
08-03
第十五课 页面功能区域布局实战（模态框）学习目录模态框文档结构模态框样式模态框文档结构<h3>用户登录</h3><input type="text" place
Java删除鼠标选中区域_html鼠标选择一个区域，把该区域checkbox 都选中
weixin_36182568的博客
02-26 103
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">vardownX;vardownY;varisSelecting=false;functionmUp(ev){varregion=document.getElementB...
html5实现鼠标框选,使用原生js编写一个简单的框选功能方法
weixin_29369363的博客
06-05 3324
今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能。需求描述鼠标左键按下不放，移动鼠标出现矩形选框；鼠标左键松开，根据上边出现的矩形选框统计选框范围内的DOM元素；嗯...上边的功能描述看着是挺简单的，但实现起来也还是会有些地方需要斟酌思考的。比如，如果我们的框选范围不是document.body，而是某一个div里边进行框选呢？而现实开发过程中，我们会遇上的应该就是第二种情况...
鼠标移动形成选择框-选择checkbox
iteye_6992的博客
03-20 669
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta
html div鼠标选中状态,CSS禁止网页或DIV中的文字被鼠标选中
weixin_33152959的博客
05-30 1628
有一些网站的站长朋友们，为了防止自己网站的内容被复制，或者出于某中原因不想让网站中某个DIV元素中的文字被访客选中，想出了各种各大样的招数。今天本飞鸟慕鱼的博主就和大家说一说，如何利用CSS3的属性，来禁止网页或是某个DIV元素中的文字被鼠标选中。CSS属性禁止网页文字被选中CSS3中有个user-select属性，这个属性可以设置某个DIV元素中的文本不被选中，下面就详细的说一下CSS3中use...
高德地图实现多边形框选选中地图中坐标点.html
03-15
高德地图实现多边形框选，选中展示地图中坐标点。实现坐标点框选。范围内坐标点选择。包括矩形，圆形，和任意多边形。。。需要修改key为自己注册的开发key
select里实现checkbox选择和input里边实现上下一条
08-29
为了在`input`中实现上下滚动，我们可以考虑使用`contenteditable`属性，将其设置为`true`，这样`input`就变成了一个可编辑的区域，然后通过CSS和JavaScript来实现滚动效果。 例如： ```html ; height: 100px;"> `...
element table 实现鼠标拖拽选中
weixin_30791095的博客
07-28 1969
父组件 <template> <div id='add'> <airtable :tableData="tableData" :columData="columData" :menuList ="menuList" :pa...
javascript 设置某DIV区域内的checkbox复选框
10-29
主要用到dom的两个函数document.getElementById(id)和document.getElementsByTagName(name),希望对写复选框全选的虾们有些许帮助。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6037
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
java checkbox 多选_[Java教程]实现checkbox的多选
weixin_39614262的博客
02-13 845
[Java教程]实现checkbox的多选02016-11-01 00:00:05checkbox多选技术一般水平有限，有什么错的地方，望大家指正。全选，多选都是为了使用的方便，一般情况下全选就够用了，但是用户要求实现一个多选的功能也没有办法老老实实的做吧。多选的实现也较为简单，首先需要一个遮罩可以标识给用户当前所选择的区域，其次就是选中用户所需要的信息，按照这个思路我们来一步步实现。遮罩实现我们...
html鼠标选择文字,利用html5实现鼠标选取文字高亮显示特效
weixin_33416697的博客
06-03 1293
特效描述：利用html5实现 鼠标选取 文字高亮显示。利用html5实现鼠标双击选中文字高亮显示特效代码结构1. 引入CSS2. 引入JS3. HTML代码FokusFokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.T...
vue中发现 （适合html）鼠标选中文本复制，如果松开时鼠标位于click包裹的文本上会默认执行click事件
qq_36571836的博客
04-26 2239
//事件触发时机 onmousedown->onmouseup->onclick，解决方案：利用down到up的时间差，与200ms作比较 //加入全局指令 onclick-one.js import Vue from "vue"; export default Vue.directive("dbClick", { inserted(el, binding) { el.addEventListener("click", e => { if
HTML CSS 鼠标鼠标选中的更改颜色
xiyanwushi的专栏
05-05 5058
::-moz-selection{background:#93C;color: #fff;}  ::selection {background:#93C; color:#fff;}  --------------------------------------------------------------------------- 说明： 　　1、-moz-属性前缀是个火狐浏览器用的，而
html 鼠标选中状态,js如何实时精确地获取鼠标选中的html内容，代码如下：
weixin_36054444的博客
06-03 457
function getHtml(win){if (win.getSelection) {var range=win.getSelection().getRangeAt(0);var container = win.document.createElement('div');container.appendChild(range.cloneContents());return container....
用CSS美化被鼠标选中的文字的样式
Jinmy的博客
08-03 2667
CSS代码 /* webkit, opera, IE9 */ ::selection{background:lightblue;} /* mozilla firefox */ ​​​​​​​::-moz-selection{background:lightblue;} -moz-属性前缀是个火狐浏览器用的，而基本的::selection选择器是给谷歌浏览器用的。跟其它CSS选择器的用法一样，...
js获取网页鼠标选中部分的内容，包含html代码
浅丶巷
02-20 5775
js获取网页鼠标选中部分的内容，包含html代码
鼠标点击checkbox后，checkbox被选中，tr背景改变颜色html
最新发布
07-11
要实现鼠标点击checkbox后改变tr背景颜色的效果，你可以使用JavaScript来完成。 首先，给checkbox添加一个点击事件监听，当checkbox被点击时触发相应的函数。在该函数中，你可以使用条件语句来切换tr元素的背景颜色。 以下是一个示例的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Change TR background color on checkbox click</title> <style> .selected { background-color: yellow; } </style> </head> <body> <table> <tr onclick="changeBackgroundColor(this)"> <td><input type="checkbox"></td> <td>Row 1</td> </tr> <tr onclick="changeBackgroundColor(this)"> <td><input type="checkbox"></td> <td>Row 2</td> </tr> <tr onclick="changeBackgroundColor(this)"> <td><input type="checkbox"></td> <td>Row 3</td> </tr> </table> <script> function changeBackgroundColor(row) { var checkbox = row.querySelector('input[type="checkbox"]'); if (checkbox.checked) { row.classList.add('selected'); } else { row.classList.remove('selected'); } } </script> </body> </html> ``` 在上面的示例中，每个tr元素都有一个点击事件监听器'onclick'，当被点击时会调用changeBackgroundColor函数。该函数首先获取到被点击行中的checkbox元素，然后根据checkbox的checked属性来切换tr元素的类名。如果checkbox被选中，就会添加一个名为'selected'的类，该类定义了背景颜色为黄色。如果checkbox未被选中，就会移除'selected'类，恢复默认背景颜色。 你可以根据自己的需求修改示例代码中的样式和HTML结构。希望这能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值