Verificați/Debifați caseta de selectare cu JavaScript (jQuery sau Vanilie)?

Cum poate o casuta fi verificat/neverificat folosind JavaScript, jQuery sau vanilie?

Mooseman
Întrebarea editată 21 aprilie 2019 в 10:49
Programare
javascript jquery
21 noiembrie 2011 в 2:12
7 vizualizări
Comentarii la întrebare (1)
Soluția

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);
Martijn Pieters
Răspuns editat 18 septembrie 2019 в 5:00
Comentarii (6)

Important comportament care nu a fost încă menționat:

Programatic setarea verificat atribut, nu de foc "schimbare" eveniment de selectare.

A se vedea pentru tine în acest vioara: http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Vioara testat în Chrome 46, Firefox 41 si IE 11)

De click()` metoda

Într-o zi s-ar putea găsi te a scrie cod, care se bazează pe evenimentul a fost concediat. Pentru a asigurați-vă că evenimentul incendii, chem clic() metoda de selectare element, astfel:

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

Cu toate acestea, aceasta comută verificat starea de selectare, în loc special, setarea la "true" sau "false". Amintiți-vă că "schimbarea" eveniment ar trebui să numai foc, atunci când a verificat atribut de fapt se schimbă.

De asemenea, se aplică jQuery mod: setarea atributului folosind prop " sau "atră, nu de foc "schimbare", eveniment.

Setarea "verificat" la o anumită valoare

Ai putea testa "verificat" atribut, înainte de a apela la `click () metodă. Exemplu:

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

Citeste mai mult despre faceți clic pe metoda de aici: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Comentarii (4)

pentru a verifica:

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

să debifați:

document.getElementById("id-of-checkbox").checked = false;
jtheletter
Răspuns editat 30 ianuarie 2018 в 8:10
Comentarii (1)

Putem verificat-o de particule de selectare ca,

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

și debifați prin ,

$('id of the checkbox')[0].checked = false
Amit Joki
Răspuns editat 9 aprilie 2015 в 6:25
Comentarii (4)

Aș dori să rețineți că setarea 'verificat' atribut la un non-empty string conduce la o casetă de bifare.

Deci, dacă setați 'verificat' atribut pentru a "false", caseta de validare va fi verificat. Am avut pentru a seta o valoare șir gol, null sau valoarea booleană fals în scopul de a asigurați-vă că caseta de selectare nu a fost verificat.

Jan Rasehorn
Răspuns editat 16 noiembrie 2015 в 5:08
Comentarii (1)

Încercați Acest Lucru:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
Comentarii (0)
 
<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>
Comentarii (0)
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
Comentarii (0)

Dacă, pentru un motiv oarecare, nu't vrei (sau poate't) rula un .faceți clic pe() pe de selectare element, puteți pur și simplu schimba valoarea acesteia direct prin intermediul acestuia .verificat de proprietate (o IDL atribut a <input type="caseta">).

Notă că acest lucru nu se declanșează în mod normal legate de eveniment (schimbare) deci'll nevoie pentru a trage manual pentru a avea o soluție completă, care funcționează cu orice eveniment legat de stivuitoare.

Aici's un exemplu funcțional în prime javascript (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" />

Change the checkbox!

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

Dacă tu a alerga acest lucru și faceți clic pe atât de selectare și butonul trebuie să obțineți un sentiment de modul în care aceasta funcționează.

Rețineți că am folosit document.querySelector pentru concizie/simplitate, dar acest lucru ar putea fi ușor de construit să fie o dat ID-ul trecut la constructor, sau s-ar putea aplica la toate butoanele care acționează ca aria-etichete pentru o casetă de selectare (rețineți că nu am't deranjez stabilirea unui id pe butonul și oferindu-caseta cu o arie-labelledby, care ar trebui să fie făcut, dacă se utilizează această metodă) sau orice număr de alte moduri de a extinde acest lucru. Ultimele două `addEventListener sunt doar la demo cum functioneaza.

taswyn
Răspuns editat 27 iunie 2018 в 5:56
Comentarii (0)