js制作选型全选不全选效果

最新推荐文章于 2024-04-18 17:01:26 发布
最新推荐文章于 2024-04-18 17:01:26 发布
阅读量278 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxllynu/article/details/76724294
版权
<!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>
<style type="text/css">
.bg{
background-image: url(images/list_bg.gif);
background-repeat: no-repeat;
width: 730px;
}
td{text-align:center;
font-size:13px;
line-height:25px;
}
body{margin:0}
</style>


<script type="text/javascript">
window.οnlοad=function(){
var all=document.getElementById("all"); //查找全选标签，
all.οnclick=function(){
var products=document.getElementsByName("product");//查找所有name属性为product的标签
for (var i =0;i<products.length;i++) {
products[i].checked=all.checked;  //保证所有的product标签的checked属性和all的一致即可
}
};
var products=document.getElementsByName("product");//获取所有name属性为product的标签
for (var i=0;i<products.length;i++) {   //遍历所有的product 标签
products[i].οnclick=hand;
}
function hand(){    //为每个product标签绑定点击触发事件
var curr=this.checked;         //获取当前点击按钮
if (curr==false) {             //如果当前的checekbox的checked状态为未选中，则all
all.checked=false;       //的选择状态一定是未选中状态，可停止判断，否则，当前
return;                  //的checkBox 为选中状态
} 
for (var j =0;j<i;j++) {     //如果当前的checkbox为选中状态，则需要遍历循环其他剩余的
if (products[j].checked==false) {   //是否选中，如果未选中，则all一定是未选中状态
all.checked=false;            //否则，此时可确定所有checkbox为选中状态
return;
}
}
all.checked=true;
};
}
   


</script>


</head>


<body><table border="0" cellspacing="0" cellpadding="0" class="bg">
  <tr>
    <td style="height:40px;">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr style="font-weight:bold;">
    <td><input id="all" type="checkbox" value="全选" οnclick="checkAll();" />全选</td>
    <td>商品图片</td>
    <td>商品名称/出售者/联系方式</td>
    <td>价格</td>
  </tr>
  <tr>
<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
  
  <tr>
    <td><input name="product" type="checkbox" value="1" id="one" /></td>
    <td><img src="images/list0.jpg" alt="alt" /></td>
    <td>杜比环绕，家庭影院必备，超真实享受<br />
    出售者：ling112233<br />
    <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
    2833.0 </td>
  </tr>
  <tr>
<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
  <tr>
    <td><input name="product" type="checkbox" value="2" id="two" /></td>
    <td><img src="images/list1.jpg" alt="alt" /></td>
    <td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />
      出售者：aipiaopiao110 <br />
    <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
    6464.0 </td>
  </tr>
  <tr>
<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
  <tr>
    <td><input name="product" type="checkbox" value="3" id="three" /></td>
    <td><img src="images/list2.jpg" alt="alt" /></td>
    <td>精品热卖：高清晰，30寸等离子电视<br />
      出售者：阳光的挣扎 <br />
    <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
    18888.0 </td>
  </tr>
  <tr>
<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
   <tr>
    <td><input name="product" type="checkbox" value="4" id="four" /></td>
    <td><img src="images/list3.jpg" alt="alt" /></td>
    <td>Sony索尼家用最新款笔记本 <br />
      出售者：疯狂的镜无<br />
    <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
    <td>一口价<br />
     5889.0 </td>
  </tr>
  <tr>
<td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
    </tr>
</table>



</body>
</html>
智欣悦
关注
专栏目录
电商后台管理系统简介
jiangshen_a的博客
11-01 9275
树形组件element-tree-grid在表格中的运用
jQuery笔记
qq_46204464的博客
09-15 2672
jQuery 文章目录jQueryjavascript库常见的javascript库jQuery的概念**优点**jQuery的下载使用步骤jQuery的入口函数jQuery的顶级对象$jQuery对象和DOM 对象转换API部分基础选择器层级选择器隐式迭代(**重要**)案例筛选选择器筛选方法(重点)链式编程jQuery的排他思想样式操作操作css方式设置类样式方法类操作与className 区别属性操作设置或获取元素固有属性值 prop()设置或获取元素自定义属性值数据缓存 data()案例：购物车模
JS实现全选与全不选
SO_zxn的博客
02-04 774
场景：开发中经常会看到需要点击一个按钮实现全部选择和全部不选择。原文链接：http://blog.csdn.net/SO_zxn/article/details/79254055实现步骤：第一步：确定事件(onclick)并为其绑定一个函数第二步：书写函数(获取编号前面的复选框，获取其状态)第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)第四步：判断编号前面...
初学js者必看的，用js做全选，不选，反选的选项卡（基础的）
hjhwoshihujianhua的博客
06-03 401
全选，不选，反选                                                       var oBtn1=document.getElementById('btn1');     var oBtn2=document.getElementById('btn2');     var oBtn3=do
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1073
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
js 全选
qq_49438920的博客
06-06 1047
checkbox全选实现，Array.from、every、forEach的应用
用js实现全选和取消全选的功能
史红浩的博客
08-13 9114
&lt;input type="checkbox" id="chkAll" name="chkAll" onclick="chkAll_onclick(this)" /&gt;全选 &lt;div id="div1"&gt; &lt;input type="checkbox" id="chk1" name=&q
多选框全选反选
11-09
- 两个链接：<a href="javascript:selectAll(true)">全选</a> 和 <a href="javascript:selectAll(false)">全不选。 - 五个复选框，都具有相同的`name`属性值“enjoy”。 #### 四、关键代码解析 - **获取复选框...
【web前端Vue项目】----- 30秒教会你极简防抖输入框，面试官如何提问面试者
最新发布
m0_60635609的博客
04-18 990
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
基于vue的购物车的实现.zip
03-29
Vue.js是一款轻量级、高性能的前端JavaScript框架，它以其易上手、组件化开发的特性深受开发者喜爱。在这个基于Vue的购物车实现项目中，我们将深入探讨如何构建一个完整的购物车系统，包括商品添加、数量调整、选中...
js 全选按钮逻辑
_WanG
03-06 1569
业务场景 单机全选按钮, 对应区域下的按钮状态全部修改 实现逻辑 通过将全选按钮绑定一个点击事件, 当点击时将制定区域所有checkBox的checked状态改为true 代码示例 页面加载将id为all_normal的checkBox绑定一个点击事件 当该按钮被点击的时候检查自己当前状态 将id为tb_normal的tbody下的所有checkbox属性改为true或false //全选 ...
乘法表.php
Vivian_shuang的博客
08-15 506
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
制作复选框的全选/全不选效果
诗人密语
10-22 707
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全选功能测试&lt;/title&gt; &lt;script type="text/javascript"&gt; function a() {
原生js实现全选全部选
前端技术教程
08-28 2942
原生js实现全选全部选，面试经常会问的一个问题，希望可以帮助大家面试顺利谢谢。
使用js实现复选框的全选、取消功能
热门推荐
小花同学的成长之路
02-28 3万+
function checkAll() { var all=document.getElementById('all'); var one=document.getElementsByName('checkname'); if(all.checked==true){ for(var i=0;i<one.length;i++){
JavaScript实现全选
BearP的博客
05-24 2046
JavaScript原生代码实现全选 代码思路 先给全选按钮添加事件 定义一个变量来记录被选中的数量 通过对其他的input标签循环,将全选按钮的checked值赋值给其他input的checked 通过在循环中添加事件,来解决选中全部其他标签而全选标签无法选中的情况 , 这里需要判断checks的布尔值,来改变n的值. 主要代码 全选: <input type="checkbox" name="allcheck" id=""> <p>
JS简单的全选按钮的实现
weixin_44258955的博客
08-20 816
1.html+css部分 <style> *{ margin: 0; padding: 0; } .box { width: 160px; padding: 5px; border: 1px solid #333; margin: 100px auto; } .box > div { padding: 15px;
js实现简单的全选、全不选
LLL_liuhui的博客
02-27 680
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值