web-dev-qa-db-fra.com

Comment désactiver la case à cocher par défaut

J'ai 2 cases à cocher dans un formulaire et ces deux cases à cocher ont été enveloppées dans un form.

Pour l'un des form j'ai ajouté l'attribut autocomplete="off".
Ci-dessous l'extrait de code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
        <form name="chkBoxForm" >
            <div>
                <input type="checkbox" value="100" name="product"/>My Checkbox1
            </div>
        </form>
        <form name="chkBoxForm" autocomplete="off">
            <div>
                <input type="checkbox" value="200" name="product"/>My Checkbox2                         
            </div>
        </form>
    </body>
</html>

Maintenant, mon problème ici si nous vérifions ces cases à cocher manuellement et si nous appuyons sur F5, puis la case à cocher avec l'attribut autocomplete="off" a été décochée. Mais la case à cocher qui n'a pas cet attribut reste cochée. Cela se produit dans FireFox 22.

Ce comportement varie d'un navigateur à l'autre.
Dans IE, les deux cases à cocher restent cochées et dans Chrome les deux cases à cocher ont été décochées.

Mais lorsque j'appuie sur Entrée dans la barre d'adresse, elle n'est pas cochée dans tous les navigateurs.

Quelqu'un peut-il me dire comment décocher toujours ces cases lorsque nous appuyons sur F5?
Je suis conscient que cela peut être géré via Javascript.

Existe-t-il un autre moyen html de gérer cela?

htmlcheckbox
24
Vel

Non, il n'y a aucun moyen en HTML simple. Javascript pourrait être votre seule solution en ce moment ..

Parcourez toutes les cases à cocher en javascript et définissez-les sur non cochées:

var checkboxes = document.getElementsByTagName('input');

for (var i=0; i<checkboxes.length; i++)  {
  if (checkboxes[i].type == 'checkbox')   {
    checkboxes[i].checked = false;
  }
}

envelopper dans un écouteur onload et vous devriez être bien alors :)

17
David Fariña

jQuery

$('input[type=checkbox]').removeAttr('checked');

Ou

<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/> 

<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/> 
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/>

+

$('input.inputUncheck').removeAttr('checked');
10
Guest

Si vous avez une case à cocher avec un id checkbox_id.Vous pouvez définir son état avec JS avec prop('checked', false) ou prop('checked', true)

 $('#checkbox_id').prop('checked', false);
5
Ilker Baltaci

Une solution rapide qui m'est venue à l'esprit: -

<input type="checkbox" id="markitem" name="markitem" value="1" onchange="GetMarkedItems(1)">
<label for="markitem" style="position:absolute; top:1px; left:165px;">&nbsp</label>
<!-- Fire the below javascript everytime the page reloads -->
<script type=text/javascript>
  document.getElementById("markitem").checked = false;
</script>
<!-- Tested on Latest FF, Chrome, Opera and IE. -->
2
Bappaditya

Il s'agit d'un comportement spécifique au navigateur et d'un moyen de rendre le remplissage des formulaires plus pratique pour les utilisateurs (comme recharger la page lorsqu'une erreur est survenue et ne pas perdre ce qu'ils viennent de taper). Il n'y a donc aucun moyen sûr de désactiver cela sur tous les navigateurs à moins de définir les valeurs par défaut au chargement de la page en utilisant javascript.

Firefox semble cependant désactiver cette fonctionnalité lorsque vous spécifiez l'en-tête:

Cache-Control: no-store

Voir ceci question .

1
Mel

Un moyen simple, uniquement HTML, pas de javascript, pas de jQuery

<input name="box1" type="hidden"   value="0" />
<input name="box1" type="checkbox" value="1" />
0
Ann