Question

我有以下代码，如果更改了类的任何输入，则所有相同的类都将更改：

＆＃13;

$('#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);
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/1c177pp7/

我的新挑战如下，基于同样的例子，现在它只需要设置相同的输入（是/否），其中列名称相同。如果我点击“是”＆＃39;输入广播，只有那些＆＃39;是＆＃39;名字是彼得应该改变，忽略标记。

我在考虑两个方法：

直接检查内容，我将不得不考虑如何获取单击行的值，然后遍历所有表并将更改应用于相同的位置。
我可以根据名称将列名设置为相同的值（当表自动创建时），这样可以更改当前代码，不仅检查输入的类（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);
                        }
                    });

                }
            });

根据列的内容更改同一类的输入

2 个答案: