J'ai adopté le code donné dans cet exemple: https://api.jquerery.com/checked-selector/
Les données est comme suit: Le code est comme suit (HTML avec JavaScript): La photo est la suivante : lorsque je clique sur les données, les entrées Quelle pourrait être la raison et que dois-je faire mal? 
3 Réponses :
Pourquoi ne pas l'utiliser comme dans le journal? $ ("entrée: cochée") .val ()
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<input type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div class="log">Log Text</div>
<label>Select:</label>
<input class="one" type="text" value="" >
</form>
<script>
$( "input" ).on( "click", function() {
$( ".log" ).html( $( "input:checked" ).val() + " is checked!" );
});
$( "input" ).on( "click", function() {
var value = $( "input:checked" ).val();
$(".one").val(value);
}).keyup();
</script>Vous pouvez essayer d'exécuter le code Snippet, je vous ai fourni que je viens d'ajouter HTTPS: //code.jquery.com/jquery-3.1.0.js fonctionne bien
p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<form>
<div>
<input type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div class="log">Log Text</div>
<label>Select:</label>
<input class="one" type="text" value="" >
</form>
<script>
$( "input" ).on( "click", function() {
$( ".log" ).html( $( "input:checked" ).val() + " is checked!" );
});
$( "input" ).on( "click", function() {
var value = $(this).val();
$(".one").val(value);
}).keyup();
</script>
</body>
</html>Le scénario que vous présentez dans l'image se produit lorsque vous vérifiez d'abord la banane, puis vérifiez l'orange, puis décochez l'orange, puis vérifiez orange et vérifiez la banane.
Je dirigerai plusieurs choses: P>
$ ("entrée") code>)
au lieu de tout faire dans une seule fonction? LI>
- Depuis que vous avez utilisé des cases à cocher, et votre sélection est basée sur code> entrée code> et
entrée: cochée code>, quand on vérifie plus de 1 case à cocher, avec Entrée: vérifié Vous sélectionnez uniquement la seule case à cocher vérifiée et non le dernier que l'utilisateur a cliqué sur. li>
- dans la fonction 2e clic que vous avez utilisé
keyup () code> et je ne vois pas une raison de le faire. Li>
- Puisque vous sélectionnez Code> Entrée CODE> (qui est un nom de balise), il effets chaque entrée, y compris l'entrée
une code>. Ce qui signifie que chaque fois que l'utilisateur clique sur l'entrée code> one code>, les fonctions de clic sont appelées sans raison. Li>
- Depuis que vous avez utilisé
Cliquez sur CODE> Evénement, la fonction de clic est appelée même lorsque vous Numbeckeck item, qui est impair (sauf si c'était votre intention). Li>
ol> dans le dessous coupé, j'ai corrigé tous les problèmes que j'ai mentionnés ci-dessus et cela simples et fonctionnent. J'espère que vous apprendrez de l'informer: d p>
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<input class="checkFruit" type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input class="checkFruit" type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input class="checkFruit" type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div class="log">Log Text</div>
<label>Select:</label>
<input class="one" type="text" value="">
</form>
Il suffit d'ajouter au HTML