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，然后从那里开始搜索相应的{{1} }}

像这样：

receipt_info

我编辑了你的jsfiddle here。

Answer 2

试试这个，

您需要先找到所需div的父tr，

 $(document).ready(function() {
  $('input[type=checkbox]').on('change', function() {
    if ($(this).is(':checked')) {
      $(this).closest('tr').find('div.receipt_info').css("display", "block");
    }
    else
    {
     $(this).closest('tr').find('div.receipt_info').css("display", "none");
    }
  });
});

小提琴：https://jsfiddle.net/9n9pfhe5/1/

Answer 3

使用 $(this).closest('tr').find('div.receipt_info') 选择器！

this指的是调用event的元素。
jQuery.closest将在DOMTree中遍历并返回匹配的元素。
jQuery.find会找到当前元素的所有孩子。

＆＃13;

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
    $('.receipt_info').hide();
    $(this).closest('tr').find('div.receipt_info').show();
  });
});

＆＃13;

.receipt_info {
  display: none;
}

＆＃13;

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

＆＃13;

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

3 个答案: