js实现全选功能

<!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">
</style>

</head>

<body>

<label id="btn"><input type="checkbox" /> 全选</label><br />

<input  type="checkbox"/><br />

<input  type="checkbox"/><br />

<input  type="checkbox"/><br />

<input  type="checkbox"/><br />

<input  type="checkbox"/><br />

<input  type="checkbox"/><br />

</body>

<script type="text/javascript">

    var oBtn = document.getElementById("btn");

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

    oBtn.onclick=function(){

        for(var x = 0;x<oInput.length;x++){

            oInput[x].checked=true;

        }

    };

</script>

</html>

获取第一个input，并在该input中绑定点击事件，当点击该input时，通过for循环实现下面所有input全部选中

js实现全选功能,布布扣,bubuko.com

时间： 2024-10-01 05:06:38

js实现全选功能的相关文章

JS全选功能代码优化

最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.container] 限定全选的容器 * @par

js初学—实现checkbox全选功能

布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id="div1"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkb

【JS】全选、不选、反选复选框（模板）

今天和大家分享一个全选.不选.反选复选框的例子,这个例子可以当做是一个模板使用,只要把一些数据适当改变以下就OK啦. 这是效果图: 代码如下: HTML部分: <input type="button" value="全选"/ id="btn1"> <input type="button" value="不选"/ id="btn2"> <input type=

elementUI+JS实现全选与反选

在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initia

用js做出全选和反选效果

效果图如下: <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("#selecAll").clic

全选功能实现总结

全选功能实现: xml部分: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content&

Android ListView条目全选功能，不用checkbox实现！

大家好,翻了翻以前的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,由于我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下去了,不干了就得在网上找工作,就喜欢干电脑相关的工作,有一天,一家培训机构给我打来电话让我去面试,我以为让我去工作那,谁知道是忽悠我去培训,我当然不可能花钱了,就直接回去了,想了几天,除了销售我真不知道干啥,咬咬牙,就花钱培训了.我擦,咋说这到了,不跟你们说了,还是写下面的这个功能吧,虽然很简单,但

JQUERY的给Check全选功能

//给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='checkname[]']").each(function(){ this.checked = true; }); }else{ $("input[name='checkname[]']").each(function(){ this.checked = false; }); }

第十六篇 JS实现全选操作

JS实现全选嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了. 这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或者删除,一个一个的来肯定麻烦,所以就有了全选和批量处理,那就是复选框! 这里我们用一个table表格来控制吧!看代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&