Значения флажков

#php #html #jquery #checkbox

Вопрос:

Я пытаюсь получить значения флажков, которые я проверяю, и поместить их в переменную php, но когда я вывожу это значение, оно дает мне нули (0). Если я поставлю 3 флажка, я получу три нуля и т. Д. Информация: Я хочу, чтобы каждый флажок был установлен, поэтому, если установлены флажки cb1 и cb3, я хочу, чтобы переменная была «cb1cb3».

HTML-код:

 <div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" onclick="click()" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" onclick="click()"  name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" onclick="click()"  name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>
 

Код JS/php:

 function click(){
    
    $("input[name='cb[]']:checked").each(function ()
    {   
        cb =$(this).text();
        //also tried to put a $ sign in front of the cb variable: $cb =$(this).text();
        //and with val instead of text: $cb =$(this).val();
        i  ;
    });
}
 

Надеюсь, вы сможете мне помочь

Ответ №1:

Всегда рекомендуется разделять JS и HTML, не используя встроенные JS. Также я бы использовал change событие и .map() метод следующим образом:

 $('input[name="cb[]"]').on('change', function() {
    const checkedVals = $('input[name="cb[]"]:checked').map((i,c) => c.value).get();
    console.log( checkedVals ); //array
    console.log( checkedVals.join('') ); //strings: values concatenated
});
 

ДЕМОНСТРАЦИЯ

 $(function() {
    $('input[name="cb[]"]').on('change', function() {
        const checkedVals = $('input[name="cb[]"]:checked').map((i,c) => c.value).get();
        console.log( checkedVals );
        console.log( checkedVals.join('') );
    });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div> 

Ответ №2:

Попробуй это

 <div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>
<script>
    $("input[name='cb[]']").on("click", (e) =>{
        let cb="";
        $("input[name='cb[]']:checked").each(function ()
        {   
            cb =$(this).val();
        //     i  ;
        });
        console.log(cb);
    });
</script>
 

Я заменяю ваш флажок html …onclick=»нажмите()»… по

 $("input[name='cb[]']").on("click", (e) =>
 

затем в js я добавил let cb = "" значение для сброса при новом событии щелчка

cb =$(this).text() изменение на cb =$(this).val(); причину $(this).text() ничего не вернуло в console.log

Комментарии:

1. Я заменяю … onclick=»щелчок()»… по $("input[name='cb[]']").on("click", (e) => в js, затем я добавил ` let cb = «»` для сброса значения при событии щелчка и для завершения cb =$(this).text() изменения, чтобы cb =$(this).val(); вызвать $(this).text() ничего не вернул в console.log

2. На вводе нет текста…. Текст есть на этикетке.