jQuery display dynamic div by choosing different checkbox

Question

I want to display contact information by choosing different checkbox, like this picture:

Here is my code:

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

I think I'm selecting wrong div, but I don't know how to fix it.

Please try answer I provided below

ScanQR
– ScanQR

2016-11-21 09:40:17 +00:00
Commented Nov 21, 2016 at 9:40 — ScanQR
– ScanQR, Commented Nov 21, 2016 at 9:40

secelite · Accepted Answer · 2016-11-21 09:33:59Z

1

Through your div and the checkbox are seperated by td you should use jQuerys parents to get the parent tr and from there start searching for the corresponding receipt_info.

Like so:

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

I edited your jsfiddle here.

answered Nov 21, 2016 at 9:33

secelite

1,3381 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rj487 Over a year ago

Thank, it's a quick answer.

ScanQR · Accepted Answer · 2016-11-21 09:38:48Z

1

Try this,

You need to first find the parent tr in which the required div is,

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

Fiddle : https://jsfiddle.net/9n9pfhe5/1/

answered Nov 21, 2016 at 9:38

ScanQR

3,8182 gold badges16 silver badges34 bronze badges

1 Comment

rj487 Over a year ago

Thanks, I forgot to say that the contact info should hide, too.

Rayon · Accepted Answer · 2016-11-21 09:41:53Z

Use $(this).closest('tr').find('div.receipt_info') selector!

this refers to element on which event is invoked.
jQuery.closest will traverse up in DOMTree and returned matched element.
jQuery.find will find all the child of he current element.

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

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

Collectives™ on Stack Overflow

jQuery display dynamic div by choosing different checkbox

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related