Jquery 从不同表行上的多个复选框中获取值

我有两个表行，每个表行包含3个复选框，每个复选框位于

中

我想根据选中复选框的某些规则，在该行中显示第四个

。每行是这样的：

HTML

<tr class="tableRow">
    <td>
       <input class="select" class="select" type="checkbox" value="select"/>
    </td>
    <td>
       <input class="voice" class="voice" type="checkbox" value="voice">
    </td>
    <td>
       <input class="mail" class="mail" type="checkbox" value="mail"/>
    </td>

    <!--The <td>'s i want the results of the checkboxes to show -->
    <td class="initial-cost">Initial cost</td> 

    <td class="voicemail-and-initial-cost">VoiceMail and Initial Cost</td>

    <td class="email-and-initial-cost">Email and Initial Cost</td>

    <td class="all-services-cost">All Services Cost</td>  
</tr>

现在我想，为了只针对所讨论行的元素，我必须从下面的内容更改jquery选择器：

 $(".initial-cost").hide();

例如：

 $('td').next(':has(.initial-cost):first').hide();

但现在我什么也没发生——甚至控制台中没有任何错误消息

请注意，问题不在于规则本身，而是我希望这些规则只适用于每个表行，而不是一次应用所有规则。我希望这是有意义的，并且有人能给我指出正确的方向。 以下是我所掌握的一些信息，这些信息可能会有所帮助：

---

像这样更改行：

$(".initial-cost").show();  

到

---

它正确地指向与已更改的复选框元素相同的行中的另一个元素。

这就是我要做的。我只发布必要的信息

使用数据属性读取数据；还有很多其他的技巧，但我喜欢这个

（注意，Jamiec使用相同的原则：查找父对象，…）

苹果，梨，柠檬{
可见性：隐藏；
}
苹果
梨
柠檬
我喜欢苹果
我喜欢梨
我喜欢柠檬
苹果
梨
柠檬
我喜欢苹果（2）
我喜欢梨（2）
我喜欢柠檬（2）
$（文档）.ready（函数（）{
//事件。单击其中一个复选框
$（'.check'）.change（函数（e）{
//开还是关？
var on_off=$（this）.is（“：checked”）？true:false；//herdoc表示法
//我们读取数据水果属性
var fruit=$（this）.data（'fruit'）；
//现在我们想知道这是哪一行，所以我们找到父行
var parent_row=$（this.parents（'tr'）；
//我们有父对象，所以我们可以查找与数据结果具有相同类的子对象
var cel=parent_row.find（'.'+fruit）.css（'visibility'，on_off？'visible'：'hidden'）；
})
})

通过对复选框状态的“规则”进行编码，您可以大大简化代码。您有3个复选框，可提供8（2^3）种可能性。您可以在对象文本中预先捕获所有这些内容，并在事件处理程序中引用它们

事件处理程序只需检查状态的更改；重新计算国家；并检查对象以查看要显示的内容

要处理单个行，只需获得与已更改的

最近的

因此，您的代码可以简化为：

var userOptionState={
0:“无成本”，
1:‘初始成本’，
2:‘语音成本’，
3:‘初始和语音成本’，
4:‘邮费’，
5:“初始和邮寄成本”，
6:“语音和邮件费用”，
7:“初始成本、语音和邮件成本”
};
$（文档）.ready（函数（）{
$（“.select、.voice、.mail”）.change（函数（事件）{
var总和=0；
var行=$（this）.closest（'tr'）；
如果（row.find（'td input.select'）.is（'：checked'））{sum+=1}
如果（row.find（'td input.voice'）.is（':checked'））{sum+=2}
如果（row.find（'td input.mail'）.is（':checked'））{sum+=4}
row.find（'td.out'）.html（userOptionState[sum]）；
});
});

免费
免费
ID必须是文档的唯一ID。如果该表行确实重复了，那么您的HTML无效，任何针对它运行的代码都将无法工作。相反，使用类和事件委托。啊，你对IDs的看法是正确的，现在正在修改……这无疑是实现这一点的正确方法——我只是懒于提供范围界定部分。这是一个很好的答案。这真的很酷，但我希望稍后将PHP查询的结果放入该输出中。我尝试了您的方法，但PHP查询不会像@Jamiec的响应那样正常工作。我不知道为什么会这样。我认为这是因为PHP是以旧的方式预加载的，按照您的方式，我必须将PHP放入“userOptionState”变量中。然而，我确实从你的回答中学到了一些东西，我想如果将来我做类似的任务，我会尝试这样做，因为它显然更精简、更简单，所以谢谢：-）
$(".initial-cost").show();  

$(this).parents('.tableRow').find(".initial-cost").show();  

<style>
  td.apples, td.pears, td.lemons {
    visibility: hidden;
  }
</style>
<table>
  <tr>
    <td>
      <input class="check" data-fruit="apples"  type="checkbox"> apples
    </td>
    <td>
      <input class="check" data-fruit="pears" type="checkbox"> pears
    </td>
    <td>
      <input class="check" data-fruit="lemons" type="checkbox"> lemons
    </td>
    <td class="apples">
      I like apples
    </td>
    <td class="pears">
      I like pears
    </td>
    <td class="lemons">
      I like lemons
    </td>
  </tr>
  <tr>
    <td>
      <input class="check" data-fruit="apples"  type="checkbox"> apples
    </td>
    <td>
      <input class="check" data-fruit="pears" type="checkbox"> pears
    </td>
    <td>
      <input class="check" data-fruit="lemons" type="checkbox"> lemons
    </td>
    <td class="apples">
      I like apples (2)
    </td>
    <td class="pears">
      I like pears (2)
    </td>
    <td class="lemons">
      I like lemons (2)
    </td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // event.  click on one of the checkboxes
    $('.check').change(function(e) {
      // on or off?
      var on_off = $(this).is(":checked") ? true : false;   // heredoc notation
      // we read the data-fruit attribute
      var fruit = $(this).data('fruit');
      // now we want to know which row this is, so we find the parent
      var parent_row = $(this).parents('tr');
      // we have the parent, so we can look for children that have the same class as the data-fruit
      var cel = parent_row.find('.' + fruit).css('visibility', on_off ? 'visible' : 'hidden');
    })
  })
</script>