JQuery 获取checkbox被选中的值

Posted 2020-08-03 折翼的飞鸟

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