zoukankan      html  css  js  c++  java
  • jquery对表单checkbox复选框的操作例子(全选,反选,获取选取值)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="css/ingrid.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" src="jquery.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $(
    "document").ready(function(){
    $(
    "#btn1").click(function(){
    $(
    "[name='checkbox']").attr("checked",'true');//全选
    })
    $(
    "#btn2").click(function(){
    $(
    "[name='checkbox']").removeAttr("checked");//取消全选
    })
    $(
    "#btn3").click(function(){
    $(
    "[name='checkbox']:even").attr("checked",'true');//选中所有奇数
    })
    $(
    "#btn4").click(function(){
    $(
    "[name='checkbox']").each(function(){
    if($(this).attr("checked")) {
    $(
    this).removeAttr("checked");
    }
    else {
    $(
    this).attr("checked",'true');
    }
    })
    })
    $(
    "#btn5").click(function(){
    var str="";
    $(
    "[name='checkbox'][checked]").each(function(){
    str
    +=$(this).val()+"\r\n";
    })
    alert(str);
    })
    })
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <form name="form1" method="post" action="">
    <input type="button" id="btn1" value="全选">
    <input type="button" id="btn2" value="取消全选">
    <input type="button" id="btn3" value="选中所有奇数">
    <input type="button" id="btn4" value="反选">
    <input type="button" id="btn5" value="获得选中的所有值">
    <br>
    <input type="checkbox" name="checkbox" value="checkbox1">
    checkbox1
    <input type="checkbox" name="checkbox" value="checkbox2">
    checkbox2
    <input type="checkbox" name="checkbox" value="checkbox3">
    checkbox3
    <input type="checkbox" name="checkbox" value="checkbox4">
    checkbox4
    <input type="checkbox" name="checkbox" value="checkbox5">
    checkbox5
    <input type="checkbox" name="checkbox" value="checkbox6">
    checkbox6
    <input type="checkbox" name="checkbox" value="checkbox7">
    checkbox7
    <input type="checkbox" name="checkbox" value="checkbox8">
    checkbox8
    </form>
    </BODY>
    </HTML>
  • 相关阅读:
    二分查找 java代码
    Failed at the bitcore-node@3.1.3 preinstall script './scripts/download' 设置linux proxy (代理)的方式
    github命令行实用操作
    H5无障碍旁白模式使用网页支持
    Vue框架搭建入门到熟悉
    解决IOS下返回不刷新的问题
    小程序—跳转 数据传递
    微信小程序——地图
    常用的正则判断
    JS 控制输入框输入表情emoji 显示在页面上
  • 原文地址:https://www.cnblogs.com/ybbqg/p/2413357.html
Copyright © 2011-2022 走看看