Tengo algunas casillas de verificación que se generan a través de un bucle foreach. Todo lo que quiero, al marcar una casilla de verificación, se marcará otra casilla de verificación. Ya he probado algo como esto,
Este es el bloque foreach donde se generan las casillas de verificación.
@foreach($testItems->where('category_id', $category->id) as $item) <div class="col-md-12"> <div class='form-check'> <div class="custom-control custom-checkbox"> <input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest" name="test_name" value="{{$item->test_name}}"> </div> <input type="checkbox" class="price" id="testPrice" name="test_price" value="{{$item->price}}" > <span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span> </div> </div> @endforeachEste es el script que probé
var chk1 = $("#selectTest"); var chk2 = $("#testPrice"); chk1.on('change', function(){ chk2.prop('checked',this.checked); });en este caso, la primera casilla de verificación solo funciona bien, pero el resto no funciona.
Solo funciona para la primera casilla de verificación solo porque los atributos id= solo coinciden con el primer nodo coincidente en el DOM. Use una clase ( .selectTest ) en su lugar.
Es posible que también deba deshacerse de id="testPrice" o convertirlo en una clase.
@foreach($testItems->where('category_id', $category->id) as $item) <div class="col-md-12"> <div class='form-check'> <div class="custom-control custom-checkbox"> <input type="checkbox"class="select-test form-check-input form-check-secondary selectTest" name="test_name" value="{{$item->test_name}}"> </div> <input type="checkbox" class="price" name="test_price" value="{{$item->price}}" > <span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span> </div> </div> @endforeachEl script jquery.
var chk1 = $(".selectTest"); chk1.on('change', function(){ $(this).closest("div").next().prop('checked', $(this).is(":checked")); });El atributo global
iddefine un identificador (ID) que debe ser único en todo el documento. Su propósito es identificar el elemento cuando se vincula (usando un identificador de fragmento ), secuencias de comandos o estilo (con CSS ).