怎么获取复选框下面的值

实际中要自动加上ID,
一下是富人用法。$(".queren").click(function() {
var data ='';
$(".yc_div").css('display', 'none');
var $a = $('.box_input');
$a.each(function(k,v){
var $c = $(this);
var $b = $c.prop('checked');
if($b){
var dFText = this.nextSibling.nodeValue;
var dLText = $c.parent().next().find('.text_input').val();
var dd = dFText + ':' + dLText;
data +=dd;
}


});
$('.div').html(data);
//var $b = $a.prop('checked');
})

解决方案 »

  1.   


    <!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=gbk" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".btn").click(function(){
    $(".yc_div").css('display','block');
    })
    $(".queren").click(function(){
            $(".yc_div").css('display','none');

    $('.yc_div li :checked').each(function(){
    var t = this, $t = $(t);
    alert( $t.next().html() )
    alert( $t.parents('li').find('.text_input').val() )
    })
        })
        $(".box_input").click(function(){
             $(this).parent().next(".ts_z2").toggle();    
        });
    });
    </script>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    body{
    font-size:12px;
    }
    li{
    list-style:none;
    }
    .btn{
    float:left;
    }
    .div{
    width:400px;
    height:100px;
    float:left;
    border:1px solid #066;
    }
    .yc_div{
    width:400px;
    height:300px;
    border:1px solid #09C;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-150px;
    display:none;
    }
    .yc_div li{
    float:left;
    }
    .ts_z1{
    width:400px;
    height:25px;
    float:left;
    margin-top:10px;
    display:inline;
    line-height:25px;
    }
    .ts_z1 .box_input{
    vertical-align:middle;
    }
    .ts_z2{
    width:400px;
    height:35px;
    float:left;
    margin-top:10px;
    display:inline;
    }
    .ts_z2 .text_input{
    width:200px;
    height:30px;
    border:1px solid #DCDCDC;
    margin-left:25px;
    vertical-align:middle;
    }
    </style>
    </head><body>
    <a class="btn" href="javascript:;">点击添加</a>
    <div class="div"></div>
    <div class="yc_div">
     <ul>
      <li>
       <div class="ts_z1">
          <input class="box_input" type="checkbox" />
      <label>外景1</label>
         </div>
         <div class="ts_z2" style="display:none;">
          <input class="text_input" type="text" />
         </div>
      </li>
      <li>
       <div class="ts_z1">
          <input class="box_input" type="checkbox" />
      <label>外景2</label>
         </div>
         <div class="ts_z2" style="display:none;">
          <input class="text_input" type="text" />
         </div>
      </li>
      <li>
       <input class="queren" type="button" value="确认" />
      </li>
     </ul>
    </div>
    </body>
    </html>参考下
    建议楼主 把结构重新整理下
      

  2.   

    $(".queren").click(function() {
    var data ='<ul>';
    $(".yc_div").css('display', 'none');
    var $a = $('.box_input');
    $a.each(function(k,v){
    var $c = $(this);
    var $b = $c.prop('checked');
    if($b){
    var dFText = this.nextSibling.nodeValue;
    var dLText = $c.parent().next().find('.text_input').val();
    var dd = '<li>' +  dFText + ':' + dLText + '</li>';
    data +=dd;
    }


    });
    data +='</ul>';
    $('.div').html(data);
    //var $b = $a.prop('checked');
    })