Tengo una lista desordenada con div y una lista de casillas ocultas, cada una con la misma cantidad de elementos.
¿Cómo puedo verificar un elemento en la lista 2 cuando hago clic en un div en la lista 1 con el mismo índice?
$(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>Así que aquí, si hago clic en Rojo en la primera UL, se marca Rojo en la segunda UL.
Puedo obtener el índice del LI en el primero pero no aplicar ese índice para marcar la casilla.
Hay un par de problemas en tu lógica. En primer lugar, puede usar eq() para seleccionar un elemento dentro de una colección por su índice. En segundo lugar, #checkbox busca un solo elemento con ese atributo de id . En su lugar, debe usar el selector de :checkbox de verificación para encontrar cualquier elemento de ese tipo dentro del padre. Finalmente, puede hacer que la lógica prop() sea más breve al proporcionar una función que acepte el estado actual de la propiedad como argumento y devuelva el valor booleano invertido. Prueba esto:
$(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>También vale la pena señalar que lo que está haciendo aquí se puede lograr solo en HTML sin necesidad de JS o 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>Por supuesto, dejé visibles las casillas de verificación en ambos ejemplos para que pueda ver cómo funciona el efecto, pero aún se pueden ocultar fácilmente usando CSS si es necesario.