Question

我正在尝试将已选中复选框中的信息解析为div。我目前有一个jquery脚本解析value属性并将它们加在一起得到如下总数：

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

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

我要做的第二部分是给出选中复选框的订单项摘要，因此我尝试使用“名称”属性作为订单项说明。但是，我无法从name元素中获取文本。我尝试了几种方法但没有成功。下面是一个使用与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);
    });

将输入属性名称解析为Div

2 个答案: