web-dev-qa-db-fra.com

Javascript checkbox onChange

J'ai une case à cocher dans un formulaire et j'aimerais qu'elle fonctionne selon le scénario suivant: 

si quelqu'un le vérifie, la valeur d'un champ de texte (totalCost) doit être définie sur 10. Ensuite, si je reviens en arrière et décoche la case, une fonction calculate() définit la valeur de totalCost en fonction d'autres paramètres du formulaire. 

Donc, en gros, j'ai besoin de la partie où, quand je coche la case, je fais une chose et quand je la décoche, j'en fais une autre.

javascriptcheckbox
86
bikey77
function calc()
{
  if (document.getElementById('xxx').checked) 
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>
128
Senad Meškin

Javascript pur:

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    console.log('checked')
  } else {
    console.log('not checked')
  }
})

HTML:

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

jsfiddle:

https://jsfiddle.net/pfcymb4j/1/

30
Vic

Si vous utilisez jQuery .., je peux suggérer ce qui suit:

$('#my_checkbox').click(function(){
    if($(this).is(':checked')){
        $('input[name="totalCost"]').val(10);
    } else {
        calculate();
    }
});
25
Liangliang Zheng

Utilisez un événement onclick, car chaque clic sur une case à cocher le change réellement.

18
SergeS

La solution suivante utilise jquery. Supposons que vous ayez une case à cocher avec l'ID checkboxId.

const checkbox = $("#checkboxId");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
});
7
Eugene

Référencez la case à cocher par son identifiant et non avec le # Attribuez la fonction à l'attribut onclick plutôt que d'utiliser l'attribut change

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};
2
Bart

Je sais que cela ne semble pas être une réponse, mais je le mets ici pour qu’il puisse aider les autres à l’avenir.

Supposons que vous construisez une table avec une boucle foreach. Et en même temps, en ajoutant des cases à cocher à la fin.

<!-- Begin Loop-->
<tr>
 <td><?=$criteria?></td>
 <td><?=$indicator?></td>
 <td><?=$target?></td>
 <td>
   <div class="form-check">
    <input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>> 
<!-- mark as 'checked' if checkbox was selected on a previous save -->
   </div>
 </td>
</tr>
<!-- End of Loop -->

Vous placez un bouton sous la table avec une entrée masquée:

<form method="post" action="/goalobj-review" id="goalobj">

 <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->

 <input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
 <button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>

Vous pouvez écrire votre script comme suit:

<script type="text/javascript">
    var checkboxes = document.getElementsByClassName('form-check-input');
    var i;
    var tid = setInterval(function () {
        if (document.readyState !== "complete") {
            return;
        }
        clearInterval(tid);
    for(i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener('click',checkBoxValue);
    }
    },100);

    function checkBoxValue(event) {
        var selected = document.querySelector("input[id=selected]");
        var result = 0;
        if(this.checked) {

            if(selected.value.length > 0) {
                result = selected.value + "," + this.value;
                document.querySelector("input[id=selected]").value = result;
            } else {
                result = this.value;
                document.querySelector("input[id=selected]").value = result;
            }
        }
        if(! this.checked) { 

// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.

            var compact = selected.value.split(","); // split string into array
            var index = compact.indexOf(this.value); // return index of our selected checkbox
            compact.splice(index,1); // removes 1 item at specified index
            var newValue = compact.join(",") // returns a new string
            document.querySelector("input[id=selected]").value = newValue;
        }

    }
</script>

Les identifiants de vos cases à cocher seront soumis sous la forme d'une chaîne "1,2" dans la variable de résultat. Vous pouvez ensuite le décomposer au niveau du contrôleur comme vous le souhaitez.

0
Bruce Tong

essayer

totalCost.value = checkbox.checked ? 10 : calculate();

function change(checkbox) {
  totalCost.value = checkbox.checked ? 10 : calculate();
}

function calculate() {
  return other.value*2;
}
input { display: block}
Checkbox: <input type="checkbox" onclick="change(this)"/>
Total cost: <input id="totalCost" type="number" value=5 />
Other: <input id="other" type="number" value=7 />
0
Kamil Kiełczewski