Скопируйте выбранное значение флажка из одного флажка в другой сразу, используя JQUERY - PullRequest
Новая
       25

Скопируйте выбранное значение флажка из одного флажка в другой сразу, используя JQUERY

0 голосов
/ 27 сентября 2018

Я относительно новичок в Jquery и боролся с этой проблемой в течение последнего дня или около того.Я пытаюсь сделать что-то, казалось бы, простое, но я не могу понять это.У меня есть два одинаковых флажка с множеством записей, и конечный пользователь может выбрать несколько вариантов в любом из них.Если значение в checkboxa выбрано, я хочу, чтобы оно немедленно выбрало идентичное значение в checkboxb.Я исследовал много решений и попробовал следующее: 

       $(document).ready(function (){
       $("#id_checkboxa").change(function() {
         $('#id_checkboxa input[type="checkbox"]:checked').each(function(){
             $('#id_checkboxb input[type="checkbox"]').eq($(this).index()).prop('checked',true);
         });
       });
      });

Мой HTML.Я использую шаблон Django и формы с набором запросов для выбора, поэтому я пытаюсь использовать идентификатор с помощью Jquery для манипуляции флажками. 

<div class="spacer34">
  <label class="title130">Checkboxa:</label>
    <div class="spacer68">
      <div class="spacer73">
        {{ form.checkboxa }}
      </div>
    </div>
</div>

Я нашел подход выше, ссылаясь на следующий кодфрагмент кода SO .. Копировать состояние проверки набора флажков в другой набор полей

Выше будет скопировано первое значение, которое я выбрал в checkboxa, в верхнюю часть флажкаb, но это все.Я подозреваю, что мне нужно пройтись по индексу или создать массив, чтобы попытаться найти проверенные значения, но я не могу с этим разобраться.Я определенно хочу использовать подход JQUERY ID в решении этой проблемы.Заранее спасибо за любые мысли.

После экспериментов я дошел до ... 

            $(document).ready(function (){
            $("#id_checkboxa").change(function() {
                console.log("Hello world!");            
             });
             });

И моя консоль покажет привет мир!

Когда я пытаюсь сделать что-то вроде ... 

            $(document).ready(function (){
            $("#id_checkboxa").change(function() {
                console.log("Hello world!");
                let selectedValA = $(this).val();
                let isAChecked = $(this).prop("checked");
                $(`#id_checkboxb[value=${selectedValA}]`).prop("checked", isAChecked);
             });
             });

, я получаю следующую ошибку: 

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #id_checkboxb[value=]
    at Function.fb.error (jquery.min.js:2)
    at fb.tokenize (jquery.min.js:2)
    at fb.select (jquery.min.js:2)
    at Function.fb [as find] (jquery.min.js:2)
    at n.fn.init.find (jquery.min.js:2)
    at new n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at HTMLUListElement.<anonymous> ((index):85)
    at HTMLUListElement.dispatch (jquery.min.js:3)
    at HTMLUListElement.r.handle (jquery.min.js:3)

Я знаю из предыдущих экспериментов, что Django формирует и JQueryможет быть проблемой, чтобы подключиться только время от времени.Заранее благодарим за любые другие мысли.

Если я сделаю следующее ... 

              $(document).ready(function (){
              $("#id_checkboxa").change(function() {
                  console.log("Hello world!");
                  let selectedValA = $(this).val();
                  let isAChecked = $(this).prop("checked");
                    $('#id_checkboxb input[type=checkbox]').prop('checked', true);
               });
               });

В ту минуту, когда я выбираю значение флажка в флажке, все значения флажка выбираются.Я пытаюсь просто получить значение, которое я выбрал в checkboxa, чтобы появилось n checkboxb, а не все флажки.

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Мне кажется, я знаю, что вы пытаетесь сделать.Кажется, что это может быть проще с классами (сгруппировать флажки по именам классов)

При нажатии флажка с классом checkboxA он также будет проверять флажок с классом checkboxB и только если он также имеетто же значение, что и у флажка A 

$(document).ready(function() {
  $(".checkboxA").change(function() {
    let selectedValA = $(this).val();
    let isAChecked = $(this).prop("checked");
    // get a checkbox from the checkboxs with class "checkboxB" and have the same value as the checked checkboxA and set its checked prop to the same as checkboxA
    $(`.checkboxB[value=${selectedValA}]`).prop("checked", isAChecked);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- checkbox set A -->
<div>
one <input type="checkbox" class="checkboxA" value="1"/>
two <input type="checkbox" class="checkboxA" value="2"/>
three <input type="checkbox" class="checkboxA" value="3"/>
four <input type="checkbox" class="checkboxA" value="4"/>
five <input type="checkbox" class="checkboxA" value="5"/>
</div>

<br/>
<br/>

<!-- checkbox set B -->
<div>
one <input type="checkbox" class="checkboxB" value="1"/>
two <input type="checkbox" class="checkboxB" value="2"/>
three <input type="checkbox" class="checkboxB" value="3"/>
four <input type="checkbox" class="checkboxB" value="4"/>
five <input type="checkbox" class="checkboxB" value="5"/>
</div>
0 голосов
/ 28 сентября 2018

Поскольку я использую формы и шаблоны Django, я не мог легко использовать класс.Используя вышеизложенные предложения вместе с кучей исследований.Я обнаружил, что мне нужно использовать входное имя, а не класс или идентификатор.Вот мой код, который решил мою проблему. 

        $(document).ready(function() {
          $("[name=checkboxa]").change(function() {
            let selectedValA = $(this).val();
            let isAChecked = $(this).prop("checked");
            $(`[name=checkboxb][value="${selectedValA}"]`).prop("checked", isAChecked);
          });
        });
        });

Вам необходимо опросить DOM и выяснить, как называется флажок.В приведенном выше случае имя было checkboxa и checkboxb.Спасибо за все предложения, которые помогли мне попасть сюда.

0 голосов
/ 27 сентября 2018

Разве вы не можете просто переключать все ящики одного и того же класса, которые не выбраны, 

$('.CbAB').off('change').on('change', function() {
  $('.CbAB').not(this).prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="CbAB" type="checkbox" name="CB" value="A">A<br>
<input class="CbAB" type="checkbox" name="CB" value="B">B<br>
...