變化輸入

Question

我有以下代碼，其中，如果一個類的任何輸入被改變所有相同類別的會改變：

$('#TableTest').on('click', '.c1s', function() { 
 
    if ($(this).prop('checked')) { 
 
    $(".c1s").prop("checked", true); 
 
    $(".c1n").prop("checked", false); 
 
    } 
 
}); 
 

 
$('#TableTest').on('click', '.c1n', function() { 
 
    if ($(this).prop('checked')) { 
 
    $(".c1n").prop("checked", true); 
 
    $(".c1s").prop("checked", false); 
 
    } 
 
});

table, 
 
td, 
 
th, 
 
tr { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="TableTest" style="border: 1px solid black;"> 
 
    <thead> 
 
    <tr>Name</tr> 
 
    <tr>Has a car?</tr> 
 
    <tr>Has a dog?</tr> 
 
    </thead> 
 
    <tr> 
 
    <td>Peter</td> 
 
    <td> 
 
     <label>Yes</label> 
 
     <input type="radio" name="column1" class="c1s" value="1"> 
 
    </td> 
 
    <td> 
 
     <label>No</label> 
 
     <input type="radio" name="column1" class="c1n" value="0"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Mark</td> 
 
    <td> 
 
     <label>Yes</label> 
 
     <input type="radio" name="column2" class="c1s" value="1"> 
 
    </td> 
 
    <td> 
 
     <label>No</label> 
 
     <input type="radio" name="column2" class="c1n" value="0"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Peter</td> 
 
    <td> 
 
     <label>Yes</label> 
 
     <input type="radio" name="column3" class="c1s" value="1"> 
 
    </td> 
 
    <td> 
 
     <label>No</label> 
 
     <input type="radio" name="column3" class="c1n" value="0"> 
 
    </td> 
 
    </tr> 
 
</table>

http://jsfiddle.net/1c177pp7/

我的新challange是基於同一個例子，現在它只需要設置相同的輸入（是/否），其中列名是相同的。如果我點擊'是'輸入收音機，只有名字是彼得的'是'應該改變，忽略標記。

我想2個approches這裏：

1. 檢查直接的內容，我將不得不考慮如何得到該行的值單擊了再通過所有的表迭代和應用的變化，其中這些都是一樣的。
2. 我可以根據名稱（當表自動創建時）將列Name的類設置爲相同的值，這將改變當前代碼不僅檢查輸入的類（c1s/c1n），但也是被點擊的那一行的類。

你推薦我什麼？你能指導我一點嗎？我希望我已經清楚了。

Answer 1

試試這個

  $('#TableTest').on('click', '.c1s', function() { 
       if ($(this).prop('checked')) { 
        var name= $(this).closest('tr').find('td:eq(0)').text(); 
        $('#TableTest').find('td:first-child:contains("'+name+'")').closest('tr').find(".c1s").prop("checked", true); 
        $('#TableTest').find('td:first-child:contains("'+name+'")').closest('tr').find(".c1n").prop("checked", false); 
       } 
      }); 
      $('#TableTest').on('click', '.c1n', function() { 
       if ($(this).prop('checked')) { 
        var name= $(this).closest('tr').find('td:eq(0)').text(); 
        $('#TableTest').find('td:first-child:contains("'+name+'")').closest('tr').find(".c1s").prop("checked", false); 
        $('#TableTest').find('td:first-child:contains("'+name+'")').closest('tr').find(".c1n").prop("checked", true); 
       } 
      }); 

Working fiddle

編輯

對於第二td這將工作

  $('#TableTest').on('click', '.c1s', function() { 
       if ($(this).prop('checked')) { 
        var name= $(this).closest('tr').find('td:eq(1)').text(); 
        $('#TableTest').find('td:nth-child(2):contains("'+name+'")').closest('tr').find(".c1s").prop("checked", true); 
        $('#TableTest').find('td:nth-child(2):contains("'+name+'")').closest('tr').find(".c1n").prop("checked", false); 
       } 
      }); 
      $('#TableTest').on('click', '.c1n', function() { 
       if ($(this).prop('checked')) { 
        var name= $(this).closest('tr').find('td:eq(1)').text(); 
        $('#TableTest').find('td:nth-child(2):contains("'+name+'")').closest('tr').find(".c1s").prop("checked", false); 
        $('#TableTest').find('td:nth-child(2):contains("'+name+'")').closest('tr').find(".c1n").prop("checked", true); 
       } 
      }); 

Working fiddle

Answer 2

我測試了你所說的並最終做了這件事。 這在第一個td有名字的時候有效。

試試這個請

   $('#TableTest').on('click', '.c1s', function() { 
       if ($(this).prop('checked')) { 
        $(".c1s").prop("checked", false); 
        $(".c1n").prop("checked", false); 
        var tdParent = $(this).parent().siblings(":first").text(); 
        $(".c1s").each(function(index,el){ 
          var getMyParent = $(el).parent().siblings(":first"); 
         if($(getMyParent).text() == tdParent){ 
          $(el).prop("checked", true); 
         } 
        }); 

       } 

      }); 


      $('#TableTest').on('click', '.c1n', function() { 

       if ($(this).prop('checked')) { 
        $(".c1n").prop("checked", false); 
        $(".c1s").prop("checked", false); 

        var tdParent = $(this).parent().siblings(":first").text(); 
        $(".c1n").each(function(index,el){ 
          var getMyParent = $(el).parent().siblings(":first"); 
         if($(getMyParent).text() == tdParent){ 
          $(el).prop("checked", true); 
         } 
        }); 

       } 
      });