Check checkbox by index in another list

99
March 16, 2022, at 12:00 PM

I have an unordered list with div and a hidden checkbox list, each with the same number of items.

How can I check an item in list 2 when I click a div in list 1 with the same index?

$(document).on('click', '.product-list li', function() {
  var index = $(this).index();
  if ($('.product-checkbox #checkbox index').prop('checked')) {
    $('.product-checkbox #checkbox index').prop('checked', false);
  } else {
    $('.product-checkbox #checkbox index').prop('checked', true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<ul class="product-list">
  <li>
    <div>Red</div>
  </li>
  <li>
    <div>White</div>
  </li>
  <li>
    <div>Blue</div>
  </li>
</ul>
<ul class="product-checkbox">
  <li>
    <input type="checkbox">Red
  </li>
  <li>
    <input type="checkbox">White
  </li>
  <li>
    <input type="checkbox">Blue
  </li>
</ul>

So here if I click Red in the first UL, Red gets checked in the second UL.

I can get the index of the LI in the first but not apply that index to check the box.

Answer 1

There's a couple of issues in your logic. Firstly, you can use eq() to select an element within a collection by its index. Secondly, #checkbox is looking for a single element with that id attribute. You should use the :checkbox selector instead to find any element of that type within the parent. Finally, you can make the prop() logic more succinct by providing a function which accepts the current state of the property as an argument and returns the inverted boolean value. Try this:

$(document).on('click', '.product-list li', e => {
  var index = $(e.currentTarget).index();      
  $('.product-checkbox :checkbox').eq(index).prop('checked', (i, checked) => !checked);
});
/* anonymous function version for legacy support:
$(document).on('click', '.product-list li', function() {
  var index = $(this).index();      
  $('.product-checkbox :checkbox').eq(index).prop('checked', function(i, checked) {
    return !checked;
  });
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="product-list">
  <li><div>Red</div></li>
  <li><div>White</div></li>
  <li><div>Blue</div></li>
</ul>
<ul class="product-checkbox">
  <li><input type="checkbox">Red</li>
  <li><input type="checkbox">White</li>
  <li><input type="checkbox">Blue</li>
</ul>

It's also worth noting that what you're doing here can be achieved in HTML alone with no need for JS or jQuery:

<ul class="product-list">
  <li>
    <label>
      Red
      <input type="checkbox" value="Red" />
    </label>
  </li>
  <li>
    <label>
      White
      <input type="checkbox" value="White" />
    </label>
  </li>
  <li>
    <label>
      Blue
      <input type="checkbox" value="Blue" />
    </label>
  </li>
</ul>

Of course, I left the checkboxes visible in both examples so you can see the effect working, but they can still be easily hidden using CSS if necessary.

READ ALSO
Skill stats are changing in a weird way

Skill stats are changing in a weird way

My problem: skill stats are changing in a weird way

61
How to Get Element By Class in JavaScript?

How to Get Element By Class in JavaScript?

I want to replace the contents within a html element so I'm using the following function for that:

105
Loop through each div of containers and compare the height index wise

Loop through each div of containers and compare the height index wise

Really sorry if there is any mistake in typo for titleBut I need help in looping through 2 main divs and their child divs too

92
Javascript function waits until element shows

Javascript function waits until element shows

I want to write a function that will run when the "RUN TEST" button is pressedThis function is designed to hide the two buttons on the next page

100