異なるテーブル行の複数のチェックボックスから値を取得

Question

それぞれテーブルの行には3つのチェックボックスがあり、それぞれが<td>の中にあります。

チェックボックスがオンになっている特定のルールに応じて、その行に4番目の<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です：

正しくと同じ行の別の要素をターゲット

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

へ

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

： https://jsfiddle.net/monkeyroboninja/5n0v0eL5/

Answer 1

は、このような行を変更しますチェックボックスの要素を変更しました。

Answer 2

これは私がやることです。私は本質的なものを投稿するだけです。

データ属性を使用してデータを読み取ります。他にもたくさんのトリックがありますが、私はこれが好きです。

（通知は、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> 

Answer 3

あなたは劇的にチェックボックスの状態の「ルール」を符号化することにより、コードを簡素化することができます。あなたは8（2^3）の可能性を与える3つのチェックボックスを持っています。これらのすべての先をオブジェクトリテラルでキャプチャし、イベントハンドラでそれらを参照するだけで済みます。

イベントハンドラでは、状態の変更を確認するだけで済みます。状態を再計算する。オブジェクトをチェックして何を表示するかを確認します。

個々の行を処理するには、変更された<input>に最も近い<tr>が表示されます。

だからあなたのコードは、このように単純化することができます。

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>