zoukankan      html  css  js  c++  java
  • JQuery 获取checkbox被选中的值

    html代码
     <ulid="dxbox">
               <li><inputtype="checkbox" name="dns_area" id="chk1" value="jsdx"/><span>江苏电信</span></li>           
               <li><inputtype="checkbox" name="dns_area" id="chk1" value="yndx"/><span>云南电信</span></li>
               <li><inputtype="checkbox" name="dns_area"  value="gzdx"/><span>贵州电信</span></li>
               <li><inputtype="checkbox" name="dns_area"  value="bjdx"/><span>北京电信</span></li>
               <li><inputtype="checkbox" name="dns_area"  value="hendx"/><span>河南电信</span></li>
               <li><inputtype="checkbox" name="dns_area"  value="hndx"/><span>海南电信</span></li>
               <li><inputtype="checkbox" name="dns_area"  value="tjdx"/><span>天津电信</span></li>
               <li><inputtype="checkbox" name="dns_area"  value="lndx"/><span>辽宁电信</span></li>
      </ul>

    多选框另一种展现形式:
    <form action="" method="get">
         <label><input name="Fruit" type="checkbox" value="" checked="checked" />苹果 </label>
         <label><input name="Fruit" type="checkbox" value="" />桃子 </label>
         <label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
         <label><input name="Fruit" type="checkbox" value="" />梨 </label>
    </form>

    方法1
    $("#dxbox li").each(function(){
       if($(this).find("input[type=checkbox]:checked").val()!= undefined)
       {
           alert($(this).find("input[type=checkbox]:checked").val());
       }
    });

    方法2
    $("#dxbox li input[type=checkbox]").each(function(){
       //var chk =$(this).find("[checked]");
       if(this.checked){
           alert($(this).val());
       }
    });  

    方法3 
    //此方法是获取所有选中的多选框
    $("#dxbox li input[type=checkbox]:checked").each(function(){
          alert($(this).val());
    });

     

  • 相关阅读:
    Windows下搭建JSP开发环境
    ssh 学习笔记
    18 11 27 长连接 短链接
    18 11 26 用多进程 多线程 携程 实现 http 服务器的创建
    18 11 24 简单的http服务器
    关于 某个智慧树课堂的 机器与机器交流方法
    18 11 23 正则学习
    尝试解决 : Microsoft Visual C++ 14.0 is required 的问题
    18 11 20 网络通信 ----多任务---- 携程 ----生成器
    18 11 20 网络通信 ----多任务---- 携程 ----迭代器
  • 原文地址:https://www.cnblogs.com/wind-wang/p/5643716.html
Copyright © 2011-2022 走看看