jquery - 从不同表行的多个复选框中获取值

Question

我有两个表行，每行包含 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，它有点管用，但它显示所有表格行的“...成本”，而不是单独显示每一行

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/

Answer 1

像这样改变行:

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

到

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

它正确地将同一行中的另一个元素作为已更改的复选框元素。