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());
    });

     

  • 相关阅读:
    Codeforces Round #632 (Div. 2) D-Challenges in school №41(模拟好题)
    余数求和
    B. 齐心抗疫
    MyBatis源码分析
    关于Idea中右边的maven projects窗口找不到了如何调出来
    IDEA java类文件左下角出现红色的J标识,解决方法
    Postman Tests脚本的使用
    JSONPath解析json
    Postman + Newman 生成测试报告
    TestNG 多线程测试
  • 原文地址:https://www.cnblogs.com/wind-wang/p/5643716.html
Copyright © 2011-2022 走看看