解析输入属性名称分为

Question

我试图解析信息从检查复选框到div。我现在有一个jQuery脚本解析属性的值相加，然后一共拿到这样的：

<script> 
$(document).ready(function() { 
    $('.option').click(function(){     
     var total = 0; 

     $('.option:checked').each(function(){ 
      total += parseInt($(this).val()); 
     });   
     $('#total').html('$'+ total);   
    }); 
}); 
</script> 

我想要做的第二部分是给检查复选框的行项目总结，所以我尝试使用订单项描述的“名称”属性。但是，我无法从名称元素中获取文本。我尝试了几种方法，但没有成功。以下是使用与value元素相同格式的示例。

<script> 
$(document).ready(function() { 
    $('.option').click(function(){     
     $('.option:checked').each(function(){ 
     var selection = $(this).attr('name'); 
     }); 
    $('#summary').html(selection); 
    }); 
}); 
</script> 

这里是我的html：

<div id="fragment-1"> 
    <ul class="tanks"> 
     <li><img src="tankthumb.jpg" alt="560 Gallon Tank"/><br /><input type="checkbox" class="option" name="560 Gallon Tank" value="500"/> 560 Gallon Tank</li> 
     <li><img src="2000tank.jpg" alt="1000 Gallon Tank"/><br /><input type="checkbox" class="option" name="1000 Gallon Tank" value="800"/>1000 Gallon Tank</li> 
     <li><img src="2000tank.jpg" alt="2000 Gallon Tank"/><br /><input type="checkbox" class="option" value="1600"/>2000 Gallon Tank</li> 
    </ul> 
</div> 
<div id="summary"> 

</div> 
<div id="total" style="border-top:1px solid; margin-top:450px;"> 
$0 
</div> 

感谢您的帮助！

Answer 1

你有

$('.option:checked').each(function() { 
    var selection = $(this).attr('name'); 
}); 
$('#summary').html(selection); 

其中var selection是本地的给each功能。这种方式selection是不可用的，以设置#summary html。

如果你想收集所有name属性字符串，必须做这样的事情

var selection = ''; 
$('.option:checked').each(function() { 
    selection += $(this).attr('name') + '<br>'; 
}); 
$('#summary').html(selection); 

JSFiddle

Answer 2

您的问题是selection是$('.option:checked').each功能的范围内定义。 您需要定义范围外的变量，如下所示：

$('.option').click(function(){ 
     var selection = ""; 
     $('.option:checked').each(function(){   
       selection = $(this).attr('name');   
     }); 

     $('#summary').html(selection); 
    });