Question

假设有多个复选框及其文本 -

<input class="checkbox" type="checkbox" /> <input class="num" type="text" /><br />
<input class="checkbox" type="checkbox" /> <input class="num" type="text" /><br />
<input class="checkbox" type="checkbox" /> <input class="num" type="text" /><br />

引用其checkbox为checked的文字的最优雅方式是什么？

修改：我想要的更多描述

选择其checkbox为checked的文本中的所有数字，然后计算这些数字的总和。

Answer 1

你试过吗

input:checked + input[type=text]

小提琴：

http://jsfiddle.net/yAL4p/1/

编辑：因为你需要求和：

function updateSum() {
   var sum = 0;
   $('input:checked + input[type=text]').each(function() {
      //If it's an invalid number, return and go to the next element.
      var value = $(this).val();
      if(!isNaN(value)) return;

      //*1 here so that it doesn't concat the string but instead treat it as integer
      sum += value*1; 
   });

   //Do whatever you want with sum here
}

//Update the sum everytime a checkbox change is invoked
$('input[type=checkbox]').change(updateSum);

编辑小提琴：

http://jsfiddle.net/yAL4p/7/

Answer 2

不确定你想要什么，所以这可能不是很有用，但它解释了这个概念：

var sum = 0;
$('.checkbox:checked').each(function(){
    var value = $(this).next()[0].value;
    if( !isNaN(value) ){ sum+= parseInt(value,10); } // only add if its a number
})

在更复杂的代码中，这可能不起作用。或者当您更改代码时，这将失败（如果输入不再是下一个项目）。要解决这个问题，您可以换行每一行，在此示例中为div：

var sum = 0;
$('.checkbox:checked').each(function(){
    var value = $(this).parent().find('.num')[0].value;
    if( !isNaN(value) ){ sum+= parseInt(value,10); } // only add if its a number
})

Answer 3

像这样使用：

$('input[type="checkbox"]:checked + input[type="text"]')

如何在复选框附近引用文字？

3 个答案: