1

我有一个如下所示的表格：

<table class="authors-list">
      <tr>
         <td style="font-size:10px;"><a class="deleteRow"> <img src="delete2.png" /></a></td>
         <td ><input type="text" id="product1" name="product1" class="rounded"/></td>
         <td ><input type="text" size='5' id="qty1" name="qty1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h09_1" name="h09_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h12_1" name="h12_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h15_1" name="h15_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h18_1" name="h18_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h21_1" name="h21_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h24_1" name="h24_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h27_1" name="h27_1" class="rounded"/></td> 
         <td class="tdcheckbox"><input type="checkbox"  id="h30_1" name="h30_1" class="rounded"/></td> 
         <td><input type="hidden" name="checkedsizes_1" id="checkedsizes_1" value="0"></td>
      </tr>
</table>

我想要一个脚本，当调用用该行checksizes中选中复选框的数量填充每个行字段时。

小提琴可以在这里查看：http: //jsfiddle.net/emL6x/8/

我到目前为止的jquery是：

countChecks(){
     $('.author-list tr').each(function(){
         var count = 0;
         var hdn = $(this).find('input[name^="checkedsizes"]');
         count = $(this).find(':checkbox:checked').length;
         hdn.val(count);
     });
}

这目前不起作用。感谢您对答案或小提琴的任何帮助。我正在使用 jquery 1.9.1。

请记住，我的表有多行，因此需要遍历每一行。

再次感谢。

4

4 回答 4

3

它有助于声明某事是一个函数并正确引用它

countChecks(){必须声明function countChecks(){

并且countchecks();应该是 countChecks();

这也很有用，当你给一个表一个类时.authors-list，你使用正确的类名来选择它

$('.author-list tr')..应该读 $('.authors-list tr')...

http://jsfiddle.net/emL6x/11/

其他一切都很好。

于 2013-04-22T14:22:33.860 回答
2

您有一些拼写错误/语法错误，我已对其进行了修改：

function submitFunction(){
    alert("call countchecks");   
    countChecks();
    alert("checkedsizes populated");      
    alert("continue with submit");      
}

function countChecks(){
     $('.authors-list tr').each(function(){
         var count = 0;
         var hdn = $(this).find('input[name^="checkedsizes"]');
         count = $(this).find(':checkbox:checked').length;
         hdn.val(count);
         alert(count);
     });
}

你会发现你的主要错误是Uncaught ReferenceError: submitFunction is not defined你得到的，因为你内联调用你的函数，所以函数必须全局定义，这意味着你不能加载脚本 onLoad。这可以在 jsFiddle 中完成，我已经修改了你的以创建一个工作版本：jsFiddle

于 2013-04-22T14:25:25.087 回答
1

你的 JS 中有很多错别字。这是有效的代码，除了从按钮中删除事件侦听器并将其放入它所属的 JS 之外，无需更改任何标记：

$(function () {
    var countChecks = function () {
         $('.authors-list tr').each(function(){
             var count,
                 hdn = $(this).find('input[name^="checkedsizes"]');
             count = $(this).find('input:checked').length;
             hdn.val(count);
         });
    }
    $('input[type="button"]').click(function () {
        alert("call countchecks");   
        countChecks();
        alert("checkedsizes populated");      
        alert("continue with submit");      
    });
});

我已经相应地更新了你的小提琴。

于 2013-04-22T14:30:46.083 回答
1

这是正确的JS代码：

function submitFunction (){
alert("call countchecks");   
countChecks();
alert("checkedsizes populated");      
alert("continue with submit");      
}

function countChecks(){
 $('.author-list tr').each(function(){
     var count = 0;
     var hdn = $(this).find('input[name^="checkedsizes"]');
     count = $(this).find(':checkbox:checked').length;
     hdn.val(count);
 });

}

除了错别字，您还需要更改左侧的 Frameworks & Extensions 设置，默认为 'onDomready'，您需要将其更改为 'no wrap - in'。

于 2013-04-22T15:00:31.433 回答