seleccionar - uncheck checkbox jquery

Extender el área seleccionable alrededor de una casilla de verificación con jQuery

Question

Estoy diseñando una lista de tareas que usa las casillas de verificación estándares, provistas por el navegador. Pero en mi humilde opinión, las áreas de casillas de verificación son demasiado pequeñas y difíciles de cliquear, especialmente si haces clic en varias casillas de verificación de estilo de usuario semiautomático (para usuarios que no conocen los atajos de teclado pero que quieren archivar, eliminar, etc. .todo a la vez).

¿Hay alguna manera de hacer clic en el área alrededor de la casilla de verificación, por ejemplo, un espacio extra alrededor de 5px? Estoy usando jQuery para mi código principal del lado del cliente, aunque no estoy en contra de utilizar el JS simple antiguo si tiene más sentido.

Ah, y realmente no estoy buscando un complemento. Algo ligero está en orden aquí.

¡Saludos de antemano!

Answer 1

¿Puedes usar una etiqueta asociada con la casilla de verificación? Luego, al hacer clic en la etiqueta, se marcará / desmarcará la casilla.

Answer 2

Al crear etiquetas de imágenes clicables que funcionan en IE8, diseñé el margen y el relleno de la etiqueta para cubrir el área alrededor de la casilla de verificación en la que quería que se pudiera hacer clic. El efecto es un área grande en la que se puede hacer clic y que cubre la etiqueta, la casilla de verificación y algunos espacios en blanco adicionales.

label {
    margin-left: -23px;
    padding-left: 28px;
}​

El margen se mueve hacia la izquierda, y el relleno empuja el texto de la etiqueta a donde debería estar.

jsfiddle de este método: http://jsfiddle.net/wydKV/

Answer 3

Es posible que tenga problemas con varios navegadores si intenta resolver esto con CSS, por las razones explicadas aquí . Sin embargo, tampoco es necesario que uses javascript.

La mejor respuesta es la respuesta de Alin de rodear la casilla con una etiqueta. Es un código HTML válido y también puede dejar el texto de la etiqueta real si está usando una columna de tabla para representar la fila seleccionada, por ejemplo.

Ejemplo de trabajo JSFiddle.

<style>
  td label {
    display: table-cell;
    vertical-align: middle;
    border: solid black 1px;
    width: 40px;
    height: 40px;
    text-align: center;
  } 
</style>

<table>
  <tr>
    <td>
      <label for="item1">
          <input type="checkbox" id="item1" name="item[]" value="item2" />
      </label>
    </td>
  </tr>
</table>

Answer 4

Es una publicación anterior, pero intenté hacer lo mismo y el relleno / ajuste no marcó la diferencia en el área de "golpe". Usé jQuery en el contenedor que contiene la casilla de verificación (en este caso un td ya que tengo una grilla de ellos, pero los divs deberían funcionar):

html

<td class="expandCheck">
  <input type="checkbox" name="cfg[][]">
</td>

js

$(".expandCheck").on(''click'', function (e) {
    cb = $(e.target).children(":checkbox");
    cb.attr("checked", !cb.attr("checked"));
});

Answer 5

Esta es la mejor solución, la utilicé y funciono perfectamente: haga clic aquí http://schoberg.net/2008/10/making-better-forms-clickable-text-for-radio-button-and-checkbox-fields/

o simplemente use este código HTML para botones de opción o casillas de verificación:

CAJA:

<label for="RememberMe">
<input type="checkbox" name="RememberMe" id="RememberMe" value="yes" />
Remember me on this computer.
</label>

BOTONES DE RADIO:

<label for="goodIdea">
<input type="radio" name="idea" id="goodIdea" value="good" />
Good Idea
</label>
<br />
<label for="badIdea">
<input type="radio" name="idea" id="badIdea" value="bad" />
Bad Idea
</label>

Answer 6

Funciona en Chrome a partir de 2016:

<style>
.cb{
    position: relative;
    margin:0;
}
.cb:before {
    content:'''';
    position: absolute;
    top:-10px;
    bottom:-10px;
    left:-10px;
    right:-10px;
}
</style>

<input type="checkbox" class="cb" />

Answer 7

Tiendo a estar de acuerdo con Karl Gohery - para este tipo de cosas, las etiquetas son la opción predeterminada en los formularios que se utilizarán ... no solo para fines visuales sino también desde el punto de vista de accesibilidad: una forma bien diseñada debe contener fieldset, leyenda y etiquetas para soportar los estándares de WAI