una - ¿Marcar/Desmarcar casilla de verificación con JavaScript?

seleccionar solo un checkbox javascript

Question

¿Cómo se puede marcar / desmarcar una casilla de verificación utilizando JavaScript o jQuery?

Answer 1

Javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Answer 2

Me gustaría tener en cuenta, que establecer el atributo "verificado" en una cadena no vacía lleva a una casilla marcada.

Por lo tanto, si establece el atributo "verificado" en "falso" , se marcará la casilla de verificación. Tuve que establecer el valor en la cadena vacía, nula o el valor booleano falso para asegurarme de que la casilla de verificación no estaba marcada.

Answer 3

Podemos marcar una casilla de verificación de partículas como,

$(''id of the checkbox'')[0].checked = true

y desmarque por

$(''id of the checkbox'')[0].checked = false

Answer 4

Si quieres usar el TypeScript, puedes hacer esto:

function defaultCheckedFirst(checkGroup: any): void {
        for (let i = 0; i < checkGroup.length; i++) {
            (<HTMLInputElement>radionGroups[i]).checked = (i === 0 ? true : false);
        }
    }

Answer 5

Si, por alguna razón, no desea (o no puede) ejecutar un click() en el elemento de casilla de verificación, simplemente puede cambiar su valor directamente a través de su propiedad .checked (un atributo IDL de <input type="checkbox"> ).

Tenga en cuenta que hacerlo no dispara el evento normalmente relacionado ( change ), por lo que deberá dispararlo manualmente para tener una solución completa que funcione con cualquier controlador de eventos relacionado.

Aquí hay un ejemplo funcional en javascript en bruto (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector(''#checkboxID'');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector(''#checkboxID+button[aria-label="checkboxID"]'');

    let checkEvent = new Event(''change'');
    
    this.checkBoxButton.addEventListener(''click'', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector(''.checkboxfeedback'').insertAdjacentHTML(''beforeend'', ''<br />Event occurred on checkbox! Type: '' + e.type + '' checkbox state now: '' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener(''change'', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener(''click'', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != ''loading'') {
  init;
} else {
  document.addEventListener(''DOMContentLoaded'', init);
}

<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

Si ejecuta esto y hace clic tanto en la casilla de verificación como en el botón, debería tener una idea de cómo funciona esto.

Tenga en cuenta que utilicé document.querySelector para mayor brevedad / simplicidad, pero esto se podría construir fácilmente para que se le pase una identificación determinada al constructor, o se podría aplicar a todos los botones que actúan como etiquetas aria para una casilla de verificación (tenga en cuenta que no se molestó en establecer una identificación en el botón y dar a la casilla de verificación una etiqueta con aria, que se debe hacer si se usa este método) o cualquier otra forma de expandirla. Los dos últimos addEventListener s son solo para demostrar cómo funciona.

Answer 6

verificar:

document.getElementById("id-of-checkbox").checked = true;

para desmarcar

document.getElementById("id-of-checkbox").checked = false;

Answer 7

Importante comportamiento que aún no se ha mencionado:

Programando el atributo marcado , no se activa el evento de change de la casilla de verificación .

Mira por ti mismo en este violín:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle probado en Chrome 46, Firefox 41 e IE 11)

El método click()

Es posible que algún día se encuentre escribiendo un código, que se basa en el evento que se está disparando. Para asegurarse de que el evento se dispare, llame al método click() del elemento de la casilla de verificación, como este:

document.getElementById(''checkbox'').click();

Sin embargo, esto cambia el estado marcado de la casilla de verificación, en lugar de establecerlo específicamente en true o false . Recuerde que el evento de change solo debe dispararse, cuando el atributo marcado realmente cambie.

También se aplica a la forma jQuery: establecer el atributo usando prop o attr , no dispara el evento de change .

Configuración checked a un valor específico

Puede probar el atributo checked , antes de llamar al método click() . Ejemplo:

function toggle(checked) {
  var elm = document.getElementById(''checkbox'');
  if (checked != elm.checked) {
    elm.click();
  }
}

Lea más sobre el método de clic aquí:
click()

Answer 8

Prueba esto:

//Check
document.getElementById(''checkbox'').setAttribute(''checked'', ''checked'');

//UnCheck
document.getElementById(''chk'').removeAttribute(''checked'');

Answer 9

<script type="text/javascript">
    $(document).ready(function () {
        $(''.selecctall'').click(function (event) {
            if (this.checked) {
                $(''.checkbox1'').each(function () {
                    this.checked = true;
                });
            } else {
                $(''.checkbox1'').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

Answer 10

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}