简单的js反选,全选,全不选

<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP ‘check.jsp‘ starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>

  <body>
    <input type="checkbox" id="boxid" onclick="selAllNo()">全选/全不选
    <hr>
    <input type="checkbox" name="love"/>篮球
    <input type="checkbox" name="love"/>足球
    <input type="checkbox" name="love"/>乒乓球
    <input type="checkbox" name="love"/>排球
    <input type="checkbox" name="love"/>保龄球
    <hr>
    <input type="button" name="checkedAll" onclick="selAll()" value="全选">
    <input type="button" name="checkedNo" onclick="selNo()" value="全不选">
    <input type="button" name="checkedOther" onclick="selOther()" value="反选">
    <script type="text/javascript">
        function selAll(){
            var loves = document.getElementsByName("love");

            for(var i=0;i<loves.length;i++){
                var love1 = loves[i];
                love1.checked = true;
            }
        }
        function selNo(){
            var loves = document.getElementsByName("love");

            for(var i=0;i<loves.length;i++){
                var love1 = loves[i];
                love1.checked = false;
            }
        }
        function selOther(){
            var loves = document.getElementsByName("love");
            for(var i=0;i<loves.length;i++){
                var love1 = loves[i];
                if(love1.checked==true){
                    love1.checked = false;
                }else{
                    love1.checked = true;
                }
            }

        }
        function selAllNo(){
            var boxid = document.getElementById("boxid");
            if(boxid.checked==true){
                selAll();
            }else{
                selNo();
            }
        }
    </script>
  </body>
</html>
时间: 2024-10-10 10:18:12

简单的js反选,全选,全不选的相关文章

【JS】全选、不选、反选复选框(模板)

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

纯js实现checkbox的全选、反选、全不选

分开:a. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" id="check_all">全选 <inpu

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

【jQuery】复选框的全选、反选,判断哪些复选框被选中

本文与<[JavaScript]复选框的全选.反选,判断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,同样做到如下的效果: 布局还是同样的布局,只是由于在jQuery框架中,无须再为按钮,指定特定的onclick事件处理函数,直接使用jQuery指定即可: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri

(checkbox)全选/全不选/反选/选中显示

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

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时,我们可以用checked的属性 选中了就返回true,没被选中就返回false; 这是html代码: <form action="#"> <label for="hobby">爱好:</label> <label for="hobby1"> <input type="checkbox" name="hobby" id=

jquery实现全选、不选、反选的两种方法

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr().   方法一

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

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

jQuery实现复选框的全选、反选、并且根据复选框的&lt;checked属性&gt;控制多个对应div的显示/隐藏

<!doctype html><html> <head> <meta charset="utf-8"> <title>jQuery实现复选框的全选.反选.并且根据复选框的(checked属性)控制多个对应div的显示/隐藏</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></