Я принял код, приведенный в этом примере: https://api.jquery.com/checked-selector/

Данные следующие:

--------------------------- | id | data | --------------------------- | 1 | orange | | 2 | apple | | 3 | banana | --------------------------- 

Код выглядит следующим образом (HTML с Javascript):

 {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value="" {amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; $( "input" ).on( "click", function() { $( ".log" ).html( $( "input:checked" ).val()   " is checked!" ); }); $( "input" ).on( "click", function() { var value = $(this).val(); $(".one").val(value); }).keyup(); {amp}lt;/script{amp}gt; . {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value="" {amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; $( "input" ).on( "click", function() { $( ".log" ).html( $( "input:checked" ).val()   " is checked!" ); }); $( "input" ).on( "click", function() { var value = $(this).val(); $(".one").val(value); }).keyup(); {amp}lt;/script{amp}gt; 

Картина выглядит следующим образом:

Картина выглядит следующим образом

Когда я нажимаю на данные, входы (флажок) не синхронизируются с текстом журнала .

В чем может быть причина и что я делаю не так?

почему бы тебе просто не использовать это как в журнале? $ («вход: проверено») .val ()

 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value="" {amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; $( "input" ).on( "click", function() { $( ".log" ).html( $( "input:checked" ).val()   " is checked!" ); }); $( "input" ).on( "click", function() { var value = $( "input:checked" ).val(); $(".one").val(value); }).keyup(); {amp}lt;/script{amp}gt; . {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value="" {amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; $( "input" ).on( "click", function() { $( ".log" ).html( $( "input:checked" ).val()   " is checked!" ); }); $( "input" ).on( "click", function() { var value = $( "input:checked" ).val(); $(".one").val(value); }).keyup(); {amp}lt;/script{amp}gt; 

Вы можете попробовать запустить фрагмент кода, который я вам предоставил. Я только что добавил https://code.jquery.com/jquery-3.1.0.js, и он отлично работает.

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width"{amp}gt; {amp}lt;title{amp}gt;JS Bin{amp}lt;/title{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.1.0.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value="" {amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; $( "input" ).on( "click", function() { $( ".log" ).html( $( "input:checked" ).val()   " is checked!" ); }); $( "input" ).on( "click", function() { var value = $(this).val(); $(".one").val(value); }).keyup(); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; . {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width"{amp}gt; {amp}lt;title{amp}gt;JS Bin{amp}lt;/title{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.1.0.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value="" {amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; $( "input" ).on( "click", function() { $( ".log" ).html( $( "input:checked" ).val()   " is checked!" ); }); $( "input" ).on( "click", function() { var value = $(this).val(); $(".one").val(value); }).keyup(); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Сценарий, который вы представляете на изображении, происходит, когда вы сначала проверяете банан, затем проверяете оранжевый, а затем снимаете галочку с оранжевого, или проверяете оранжевый, а затем проверяете банан.

Я укажу несколько вещей:

  1. Почему вы использовали 2 события клика в одном и том же выделении ( $("input") ) вместо того, чтобы делать все в одной функции?
  2. Поскольку вы использовали флажки, и ваш выбор основан на input и input:checked , если установлен флажок более 1, при input:checked выбирается только первый флажок, который установлен, а не последний, выбранный пользователем.
  3. Во второй функции щелчка вы использовали keyup() и я не вижу причин для этого.
  4. Поскольку вы выбираете input (который является именем тега), он влияет на КАЖДЫЙ вход, включая one вход. Это означает, что каждый раз, когда пользователь щелкает one вход, функции щелчка вызываются без причины.
  5. Поскольку вы использовали событие click, функция click вызывается даже тогда, когда вы разблокируете элемент, что является странным (если это не было вашим намерением).

В приведенном ниже фрагменте я исправил все упомянутые выше проблемы, и это просто и работает. Я надеюсь, что вы учитесь на этом: D

 $(".checkFruit").change(function() { if (this.checked) { var value = $(this).val(); $(".log").html(value   " is checked!"); $(".one").val(value); } }) . $(".checkFruit").change(function() { if (this.checked) { var value = $(this).val(); $(".log").html(value   " is checked!"); $(".one").val(value); } }) 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input class="checkFruit" type="checkbox" name="fruit" value="orange" id="orange"{amp}gt; {amp}lt;label for="orange"{amp}gt;orange{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input class="checkFruit" type="checkbox" name="fruit" value="apple" id="apple"{amp}gt; {amp}lt;label for="apple"{amp}gt;apple{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input class="checkFruit" type="checkbox" name="fruit" value="banana" id="banana"{amp}gt; {amp}lt;label for="banana"{amp}gt;banana{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="log"{amp}gt;Log Text{amp}lt;/div{amp}gt; {amp}lt;label{amp}gt;Select:{amp}lt;/label{amp}gt; {amp}lt;input class="one" type="text" value=""{amp}gt; {amp}lt;/form{amp}gt;