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