javascript - jQuery 通过选择不同的复选框显示动态 div

Question

我想通过选择不同的checkbox来显示联系人信息，如下图:

这是我的代码:

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
    $(this).closest('div').css("display", "block");
  });
});	

.receipt_info{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="receipt[]"/>
      </td>
      <td>Option1
        <div class="receipt_info">
          <div>
            <label>name1</label>
          </div>
          <div>
            <label>phone1</label>
          </div>
          <div>
            <label>address1</label>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" name="receipt[]"/>
      </td>
      <td>Option2
        <div class="receipt_info">
          <div>
            <label>name2</label>
          </div>
          <div>
            <label>phone2</label>
          </div>
          <div>
            <label>address2</label>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

我想我选择了错误的 div，但我不知道如何修复它。

Answer 1

通过你的div 和由td 分隔的复选框你应该使用jQuerys parents获取父 tr 并从那里开始搜索相应的 receipt_info。

像这样:

$(this).parents('tr').find('.receipt_info').show();

我编辑了你的 jsfiddle here .