zoukankan      html  css  js  c++  java
  • JQuery 判断checkbox是否选中,checkbox全选,获取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-Type" content="text/html; charset=utf-8" />
    <title>JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值</title>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>
    <script type="text/javascript">
    $(function(){
          /*------------
            全选/全不选
            ------------*/
         $('#cboxchecked').click(function(){
             //判断apple是否被选中
             var bischecked=$('#cboxchecked').is(':checked');
             var fruit=$('input[name="fruit"]');
             bischecked?fruit.attr('checked',true):fruit.attr('checked',false);
             });
             /*-------------
                获取选中值
              -------------*/
            $('#btn_submit').submit(function(){
                $('input[name="fruit"]:checked').each(function(){
                    var sfruit=$(this).val();
                    alert(sfruit);
                    });
                    return false;
                });
        })
    </script>
    </head>
     
    <body>
    <form action="">
      <input type="checkbox"  id="cboxchecked" />
      <label for="cboxchecked">全选/全不选</label>
      <br />
      <br />
      <input type="checkbox"  id="cboxapple" name="fruit" value="apple" />
      <label for="apple">Apple</label>
      <input type="checkbox"  id="cboxorange" name="fruit" value="orange" />
      <label for="orange">Orange</label>
      <input type="checkbox"  id="cboxbanana" name="fruit" value="banana" />
      <label for="banana">Banana</label>
      <input type="checkbox"  id="cboxgrapes" name="fruit" value="grapes" />
      <label for="grapes">Grapes</label>
      <br />
      <br />
      <input type="submit" id="btn_submit" value="submit" />
    </form>
    </body>
    </html>
  • 相关阅读:
    设计模式 : Template method 模板方法模式 -- 行为型
    设计模式:Strategy 策略模式 -- 行为型
    没有评审的技术都是扯淡
    TCP/IP 协议大致的概念
    HTTP 2.0 与 tomcat
    相对URL拼接为绝对URL的过程
    URI与URL区别
    《淘宝首页性能优化实践》文章阅读
    第一章 Linux内核简介
    vim中执行shell命令小结
  • 原文地址:https://www.cnblogs.com/setsail/p/3081526.html
Copyright © 2011-2022 走看看