Question

我有这个HTML代码

<div class="main"><div class="labels"><p class="values"></p></div ></div>
<div id='tabs'>
<div>
    <div class="accordion">
        <div class="sub">
            <p><input type="checkbox" data="1" value="a"/> <label ></label></p>
        </div>
        <div class="sub">
            <p><input type="checkbox" data="2" value="b"/> <label ></label></p>
        </div>
        <p><input type="checkbox" data="3" value="c"/><label></label></p>
        <p><input type="checkbox" data="4" value="d"/><label></label></p>
    </div>
</div>
</div>

和JS

$(document).ready(function() {  
        labelsValue();
});         
function labelsValue(){
   var selected = $('input[type=checkbox]:checked').map(function(){
      return $.trim($(this).attr('data'));
   }).get();
   $('.labels .values').text(selected.join(', '));
}
$('input').on('change', function() {
   labelsValue();
});

Tabs，ccordion，输入值和属性“data”，a; bels由php从数组生成动态。当复选框选中/取消选中时，我想从.accordion中的每个输入读取数据attr值，并在输入检查/取消选中时以p class =“values”动态显示。

但是使用这段代码，我只能从div中带有类.sub的输入中获取数据attr的正确显示值。但它不适用于父.accordion div内的输入。当我选中这些复选框时，它只显示带逗号的字符串，例如“,,,,,”。

如何修复它，我想让代码与.accordion div中的所有子输入一起使用。

帮助某人？

Answer 1

您需要在jquery

中使用on函数

 $('input').on('change', function() {
         labelsValue();
 });

而不是

 $('input')('change', function() {
        labelsValue();
    });

Answer 2

试试这个。

$('input').on('change', function() {
            labelsValue();
        });

如果您的数据动态尝试此方法。

$(document).on('change', 'input', function() {
   labelsValue();
});

Fiddle Demo

Answer 3

您必须将事件委托给文档：

$(document).on('change', 'input', function() {
   labelsValue();
});

，因为您尚未将更改事件放入文档中，因此不会触发。

其他方法是将其放入doc ready：

$(document).ready(function() {  
    labelsValue();

   $('input').on('change', function() { // <----put it here
        labelsValue();
   });
}); // <---end of doc ready

或简化方式：

$(document).ready(function() {  
    labelsValue();

   $('input').on('change', labelsValue);// <---put it here

}); // <---end of doc ready

Answer 4

试试这个：

$(document).ready(function() {  
        labelsValue();
});         
function labelsValue(){
    var dataValue="";
   $('input[type=checkbox]').each(function(){



          if($(this).prop("checked")){

           dataValue +=$(this).attr('data')+',';

          }

        });

    $('.labels .values').text(dataValue);


}
$('input').change(function() {
   labelsValue();
});

JSFiddle：http://jsfiddle.net/tLS8M/6/

无法在父div中获取输入attr值

4 个答案: