2011-08-31 32 views
8

¿Hay alguna manera usando asp.net/jquery para alternar la visibilidad de un div al utilizar una casilla de verificación de esta manera:jQuery selector para "Html.CheckBoxFor"

<%: Html.CheckBoxFor(m => m.Type) %>

sé cómo hacer la parte jQuery , pero no estoy seguro de cómo determinar si se hizo clic o se cambió la casilla. ¿Hay algún tipo de onChange o onClick que pueda agregar a esto?

EDITAR - Permítanme cambiar esto un poco ... ¿CÓMO puedo asignar una identificación al Html.CheckBoxFor() ??

+1

creo que el id de la casilla de verificación se ajustará automáticamente a la propiedad del objeto que ha sido creada. Entonces, en el ejemplo anterior, sería 'id =' Tipo ''. Siempre puedes echarle un vistazo al margen que crea tu código para verificarlo dos veces. – ipr101

Respuesta

17

Usted puede suscribirse para el evento y .change().toggle() la visibilidad de la div en función de si la casilla de verificación ha sido verificado o no:

$(function() { 
    $('#mycheckbox').change(function() { 
     var isChecked = $(this).is(':checked'); 
     $('#someDivId').toggle(isChecked); 
    }); 
}); 

y se puede see it in action here.

Para identificar esta casilla de verificación que bien podría asignar un identificador único:

<%: Html.CheckBoxFor(m => m.Type, new { id = "mycheckbox" }) %> 

o una clase:

<%: Html.CheckBoxFor(m => m.Type, new { @class = "check" }) %> 

y luego adaptar su selector de jQuery.

+0

Lo que quise decir es ¿cómo puedo asignar una identificación a la casilla de verificación? Estoy usando el CheckBoxFor en ASP.Net y no estoy seguro de cómo configurar el id. – Cody

+1

@Doctor Oreo, de forma predeterminada, el helper Html.CheckBoxFor asigna una identificación. Se deducirá de la expresión lambda en su jerarquía de objetos de modelos de vista. Entonces, si estamos en el nivel 0, será 'id =" Escriba "'. Por supuesto, puede personalizar esto utilizando la sobrecarga adecuada del asistente CheckBoxFor como se muestra en mi respuesta actualizada. –

+0

Por alguna razón, tengo que marcar la casilla y desmarcarla para que la función() se registre. – Cody

0

Sí, hay un evento onclick/onchange para la mayoría del elemento html.

Que asuma que su casilla de verificación tiene un id = "CheckBox1", puede hacer lo siguiente

var myCheckBox = document.getElementById("checkbox1"); 
myCheckBox.addEventListener('change', function(){do something}, false); 
+0

Lo que quise decir es ¿cómo puedo asignar una identificación a la casilla de verificación? Estoy usando el CheckBoxFor en ASP.Net y no estoy seguro de cómo configurar el id. – Cody

0

Ver esta pregunta: get the generated clientid for a form field, esta es mi respuesta:

utilizo este helper:

public static partial class HtmlExtensions 
{ 
    public static MvcHtmlString ClientIdFor<TModel, TProperty>(
     this HtmlHelper<TModel> htmlHelper, 
     Expression<Func<TModel, TProperty>> expression) 
    { 
     return MvcHtmlString.Create(
       htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(
        ExpressionHelper.GetExpressionText(expression))); 
    } 
} 

lo usa tal como lo haría con cualquier otro ayudante: @ Html.ClientIdFor (modelo => model.client.email)

o en el guión:

$(function() { 
    $('#@Html.ClientIdFor(m=>m.Type)').change(function() { 
     // Do stuff 
    }); 
});