Tengo la tarea de tener una casilla de verificación dentro de múltiples divs. Cuando la casilla de verificación está marcada, quiero ocultar el div. Quiero usar Jquery para implementar esta funcionalidad. Siento que estoy cerca, pero me falta algo esencial.

Aquí está mi código y cualquier ayuda sería muy apreciada.

Gracias

Roka

<div id='legGroup1' class="elementGroup">
    <input type="checkbox" class="delCheck" id="1" />Delete</label>
</div>

<div id='legGroup2' class="elementGroup">
    <input type="checkbox" class="delCheck" id="2" />Delete</label>
</div>

<button type='button' id='removeLeg'></button>

$("#removeLeg").click(function (e) {
    $('.delCheck').each(function () {
        if (this.id.prop('checked')) {
            $("#legGroup" + this.id).hide();
        }
    });
});
0
Roka 12 may. 2016 a las 19:05

3 respuestas

La mejor respuesta

Simplemente puede encontrar el elemento padre:

$("#removeLeg").click(function() {
    $('.delCheck:checked').each(function() {
    //          ^^^^^^^^ -> look it filters only checked elements

        $(this).parent().hide();

    });
});

O, más exacto, usando el método más cercano:

$(this).closest('.elementGroup').hide();
0
Washington Guedes 12 may. 2016 a las 16:12

En primer lugar, te falta una etiqueta abierta label en tu HTML.

<label><input type="checkbox" class="delCheck" id="1" />Delete</label>

En cuanto al evento de clic, puede intentar esto, recorrer cada casilla marcada y ocultar su padre div más cercano.

$(document).ready(function(){
    $('#removeLeg').on('click', function(){
        $('.delCheck:checked').each(function(){
            $(this).parents('div').hide();
        });
    });
});

Aquí hay una demostración: https://jsfiddle.net/nx9e1yp5/1/

0
Chin Leung 12 may. 2016 a las 16:14

Como está utilizando una función each, basarla en el valor de los elementos en la matriz que devuelve la función.

$("#removeLeg").click(function (e) {    
    $('.delCheck').each(function (key, value) {
       if ($(value).is(':checked')) {
           $(value).parent().hide();
       }
    });
});
0
Josh 12 may. 2016 a las 16:08