我有两个表行，每行包含3个复选框，每个复选框都在<td>内。
我希望在该行中显示第四个<td>，具体取决于选中复选框的某些规则。每一行都是这样的：
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有点工作，但它显示所有表行''... cost'而不是每行单独
jQuery
$(document).ready(function() { //on page load....
$(".voicemail-and-initial-cost").hide(); //hide all cost elements
$(".email-and-initial-cost").hide(); //hide all cost elements
$(".all-services-cost").hide(); //hide all cost elements
$(".select").change(function(event) { //when #select is clicked...
if ($(this).is(":checked")) { //if this checkbox has been checked...
$(".initial-cost").show(); //show .initial-cost element
} else { //otherwise...
$(".voicemail-and-initial-cost").hide(); //hide all cost elements
$(".email-and-initial-cost").hide(); //hide all cost elements
$(".all-services-cost").hide(); //hide all cost elements
}
});
$(".voice").change(function(event) { //when #voice is clicked...
if ($(this).is(":checked")) { //if this checkbox has been checked...
if ($('.mail').is(":checked")) { //check to see if #mail is checked too and if it is...
$(".initial-cost").hide(); //hide .initial-cost
$(".voicemail-and-initial-cost").hide(); //hide .voicemail-and-initial-cost
$(".email-and-initial-cost").hide();
$(".all-services-cost").show(); //show .all-services-cost
} else { //but if #mail is not checked....
$(".initial-cost").hide(); //hide .initial-cost
$(".voicemail-and-initial-cost").show(); //show .voicemail-and-initial-cost instead
}
} else { //otherwise if this checkbox is not checked...
if(($('.select').is(":checked")) && ($('#mail').is(":checked"))){ //and .select AND .mail is checked however...
$(".initial-cost").hide(); //hide .initial-cost
$(".all-services-cost").hide(); // hide .all-services-cost
$(".email-and-initial-cost").show(); //show .email-and-initial-cost instead
} else if (($('.select').is(":checked")) && (!$('.mail').is(":checked"))){ //otherwise if #select is checked AND #mail is NOT checked....
$(".voicemail-and-initial-cost").hide();
$(".initial-cost").show();
}
}
});
$(".mail").change(function(event) { //when #mail is clicked...
if ($(this).is(":checked")) { //if this checkbox has been checked...
if ($('.voice').is(":checked")) { //check to see if #voice is checked too and if it is...
$(".initial-cost").hide(); //hide .initial-cost
$(".voicemail-and-initial-cost").hide(); //hide .voicemail-and-initial-cost
$(".email-and-initial-cost").hide(); //hide .email-and-initial-cost
$(".all-services-cost").show(); //show .all-services-cost
} else { //but if #voice is not checked....
$(".initial-cost").hide(); //hide .initial-cost
$(".email-and-initial-cost").show(); //show .email-and-initial-cost instead
}
} else { //otherwise if this checkbox is not checked...
if(($('.select').is(":checked")) && ($('.voice').is(":checked"))){ //and #select and #voice is checked however...
$(".all-services-cost").hide(); // hide .all-services-cost
$(".voicemail-and-initial-cost").show(); //show .voicemail-and-initial-cost
} else if (($('.select').is(":checked")) && (!$('.voice').is(":checked"))){ //if this checkbox is not checked AND #voice is NOT checked...
$(".all-services-cost").hide(); // hide .all-services-cost
$(".voicemail-and-initial-cost").hide();
$(".email-and-initial-cost").hide();
$(".initial-cost").show(); //show .initial-cost instead
}
}
});
}); //end of ready
现在我想要仅针对相关行的元素，我将不得不从这里更改jquery选择器：
$(".initial-cost").hide();
类似于：
$('td').next(':has(.initial-cost):first').hide();
但是现在我什么也没发生 - 甚至控制台中都没有任何错误消息。
请注意，不是规则本身就是问题，我希望这些规则只应用于每个表行，而不是同时应用所有这些规则。我希望这是有道理的，有人在那里指出我正确的方向。 这里是我应该帮助的JSfiddle： https://jsfiddle.net/monkeyroboninja/5n0v0eL5/
答案 0 :(得分：3)
更改这样的行：
$(".initial-cost").show();
要
$(this).parents('.tableRow').find(".initial-cost").show();
正确定位与更改的复选框元素在同一行中的另一个元素。
答案 1 :(得分：2)
您可以通过对＆＃39;规则进行编码来大幅简化您的代码。复选框状态。你有3个复选框，可以提供8（2 ^ 3）种可能性。您可以在对象文字中预先捕获所有这些内容，并在事件处理程序中引用它们。
事件处理程序只需检查对状态的更改;重新计算国家;并检查对象以查看要显示的内容。
要处理单个行，您只需获得与已更改的<tr>最接近的<input>。
所以你的代码可以简化为：
var userOptionState = {
0: 'No cost',
1: 'Initial cost',
2: 'Voice cost',
3: 'Initial and voice cost',
4: 'Mail cost',
5: 'Initial and mail cost',
6: 'Voice and mail cost',
7: 'Initial and voice and mail cost'
};
$(document).ready(function() {
$(".select, .voice, .mail").change(function(event) {
var sum = 0;
var row = $(this).closest('tr');
if(row.find('td input.select').is(':checked')) {sum += 1}
if(row.find('td input.voice').is(':checked')) {sum += 2}
if(row.find('td input.mail').is(':checked')) {sum += 4}
row.find('td.out').html(userOptionState[sum]);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="tableRow">
<td>
<input class="select" type="checkbox" value="select" />
</td>
<td>
<input class="voice" type="checkbox" value="voice">
</td>
<td>
<input class="mail" type="checkbox" value="mail" />
</td>
<!--output td -->
<td class="out">No cost</td>
</tr>
<tr class="tableRow">
<td>
<input class="select" type="checkbox" value="select" />
</td>
<td>
<input class="voice" type="checkbox" value="voice">
</td>
<td>
<input class="mail" type="checkbox" value="mail" />
</td>
<!--output td -->
<td class="out">No cost</td>
</tr>
</tbody>
</table>
答案 2 :(得分：1)
这就是我要做的。我只发布必要的。
使用data-属性读取数据;还有很多其他技巧，但我喜欢这个。
（注意，Jamiec使用相同的原则：寻找父母，......）
<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>