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>
<script>
window.onload=function()
{
    var obtn1=document.getElementById("btn1");
    var obtn2=document.getElementById("btn2");
    var obtn3=document.getElementById("btn3");
    var odiv=document.getElementById("div1");
    var ach=odiv.getElementsByTagName("input");
    obtn1.onclick=function()
    {
        for(i=0;i<ach.length;i++)
        {
            ach[i].checked=true;
        }
    }
    obtn2.onclick=function()
    {
        for(i=0;i<ach.length;i++)
        {
            ach[i].checked=false;
        }
    }
    obtn3.onclick=function()
    {
        for(i=0;i<ach.length;i++)
        {
            if(ach[i].checked==true)//注意if里面的==等号不能和赋值号=混淆
            {
                ach[i].checked=false;
            }
            else
            {
                ach[i].checked=true;
            }
        }
    }
}
</script>
</head>

<body>
<input  id="btn1" type="button" value="全选"  /></br>
<input  id="btn2" type="button" value="不选"  /></br>
<input  id="btn3" type="button" value="反选"  /></br>
<div id="div1">
        <input type="checkbox"/></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>
        <input type="checkbox"/></br>
</div>
</body>
</html>
    
时间: 2024-10-10 14:03:20

js中的全选,不选,和反选按钮的设定的相关文章

JS中如何实现每点击一次按钮,显示一条信息

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var clickNumber = 0; function Student(name, age) { this.name = name; this.

JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?

jS中设置或者获取所选内容的值: ①innerHTML :属性设置或返回该标签内的HTML.也就是从对象的起始位置到终止位置的全部内容,包括Html标签. ②outerHTML:属性设置或返回该标签及标签内的HTML.也就是从对象的该标签起始到终止位置的全部内容,包括Html标签. 如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签, ③inneText:从起始位置到终止位置的内容,但它去除html标签.(只能在IE和chro

JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系? jQuery中的text()、html()和val()

一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HTML.也就是从对象的起始位置到终止位置的全部内容,包括Html标签.②outerHTML:属性设置或返回该标签及标签内的HTML.也就是从对象的该标签起始到终止位置的全部内容,包括Html标签.如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去

JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val() ?

作者赵晓盼课程任务一:零基础JavaScript编码(一)2809次浏览70赞2017-03-02 10:49 一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HTML.也就是从对象的起始位置到终止位置的全部内容,包括Html标签.②outerHTML:属性设置或返回该标签及标签内的HTML.也就是从对象的该标签起始到终止位置的全部内容,包括Html

JS中表格的全选和删除要注意的问题

在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. 以下是我自己做的一个小例子,用来更简单明了的说明js全选和删除. 一.全选的说明:当选中全选的checkbox时,下面1-5都会选中,没有选中时1-5都不会选中,这个实现不难,步骤如下: 1.获取全选框的选中状态, 2.for循环设置所有的单选框的选中状态 主要代码: //1.获取全选按钮 var

实现前端table中checkbox全选功能,并将选中的数据发送到后端

一.需求 1. 点击这个checkbox按钮,会选中下面所用checkbox,当然在选中的情况下点击,会将下面所有选中的checkbox取消: 2. 当下面使用submit的提交按钮时,会将所有checkbox选中的数据提交给后端: 二.实现 1.实现全选checkbox功能 技术分析:其实这里可以使用js活着jquery两种方式,我暂时使用的是js中的dom实现的,具体代码如下: <!DOCTYPE html> <html> <head> <title>实

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

vue2.0在table中实现全选和反选

其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 慕课网demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 因为上篇文章:使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.v

js 全选 不选 反选

js实现 全选 不选 反选 思路: 1,获取元素 2,给全选 不选 反选添加点击事件 3,用for循环checkbox 4,把checkbox的checked设置为true即实现全选 5,把checkbox的checked设置为false即实现不选 6,通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. html代码: <input type="button&qu