Ocultar o mostrar información dependiendo del estado de un checkbox

publicado por: Anonymous

Estoy intentando que, al cambiar el estado de un checkbox, me muestre una información y al no estar el check, no me muestre nada, pero no lo consigo.

$(document).ready(function(){
    $('.fantasma').click(function(){
        var canvas = document.getElementById($(this).attr('rel'));
        var rel = $(this).attr('rel');

        if($('input[rel="' + rel +'"].fantasma').attr(':checked')){
            $('.contentM').css('display', 'block');
        }else{
            $('.contentM').css('display', 'none');
        }

    });
});

y éste es el checkbox:

<input  id='bmm" + (i + 1) + "' rel='canvas" + (i + 1) + "' type='checkbox' class='squaredThreex fantasma hh' name='check' value='0'>

solución

tu error esta en el evento, no es click, es change y ademas que es mejor, para tu caso, utilizar la funcion .prop() en ves de .attr(). te dejo el ejemplo en un fiddle

_x000D_

_x000D_

$(function(){_x000D_
	$('.fantasma').change(function(){_x000D_
  	if(!$(this).prop('checked')){_x000D_
    	$('#dvOcultar').hide();_x000D_
    }else{_x000D_
    	$('#dvOcultar').show();_x000D_
    }_x000D_
  _x000D_
  })_x000D_
_x000D_
})

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<label for="cbmostrar">_x000D_
  <input type="checkbox" name="cbmostrar" class="fantasma" checked />_x000D_
  Mostrar contenido_x000D_
</label>_x000D_
<div id="dvOcultar">_x000D_
  este texto se ocultara_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *