JavaScript функция динамического вызова className

Question

Моя цель состоит в том, чтобы, когда пользователь нажимает на флажок, он подсчитывает, сколько проверенных входов есть с тем же class name. Я пытаюсь отправить var e в функцию подсчета, но не уверен в правильном синтаксисе. Когда я заменяю здесь e: var n = $( '.e:checked' ).length; на className, он работает. Но мне нужно, чтобы это было динамическое c.

Отредактируйте вопрос: как я могу получить значение из журнала консоли в var in PHP?

Посмотреть

<br>
<label>
    <input onclick="b(this.className)" 
           class="tuesdayMorBar" 
           type="checkbox"
           name="worker_name[]" 
           value="<?php echo $shift['fullname'];?>" />

Javascript

function b(e) {
    var countChecked = function() {
        var n = $('.e:checked').length;
        alert(n + (n === 1 ? " is" : " are") + " checked!");
    };
    countChecked();

    $("input[type=checkbox]").on("click", countChecked);
}

Answer 1

Удалить onclick="b(this.className)". Определите countChecked на глобальном уровне. Установите событие щелчка с помощью $("input[type=checkbox]").on("click", countChecked);. Затем вы можете использовать this.className внутри countChecked. Будет работать нормально. Посмотреть

<br>
<label>
    <input class="tuesdayMorBar" 
           type="checkbox"
           name="worker_name[]" 
           value="<?php echo $shift['fullname'];?>" />

Javascript

var countChecked = function() {
    var n = $('.' + this.className + ':checked').length;
    alert(n + (n === 1 ? " is" : " are") + " checked!");
};

$("input[type=checkbox]").on("click", countChecked);

Answer 2

Я сделал рабочий сниппет для вашей проблемы @ Victoria's Secret. Комментарии упоминаются в самом сниппете. Посмотрите, решит ли это вашу проблему.

function b(e) {

  let totalChecked = 0; // initialize the variable with 0;

  $("input[type=checkbox]." + e).each(function() { // check every checkbox with class e(e has className)
    //console.log($(this));
    if ($(this).is(":checked")) { // check if checkboxed is checked
      totalChecked++; // increment every time
    }
  });
  alert(`class ${e}: ${totalChecked}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><label><input onchange="b(this.className)" class="kaka" type="checkbox"
 name="worker_name[]" value="kaka1" />kaka1
 <input onchange="b(this.className)" class="kaka" type="checkbox"
 name="worker_name[]" value="kaka2" />kaka2
 <input onchange="b(this.className)" class="kaka" type="checkbox"
 name="worker_name[]" value="kaka3" />kaka3
 <br><br>
 <input onchange="b(this.className)" class="lala" type="checkbox"
 name="worker_name[]" value="lala1" />lala1
 <input onchange="b(this.className)" class="lala" type="checkbox"
 name="worker_name[]" value="lala2" />lala2
 <br><br>
 <input onchange="b(this.className)" class="jaja" type="checkbox"
 name="worker_name[]" value="jaja1" />jaja1
 <input onchange="b(this.className)" class="jaja" type="checkbox"
 name="worker_name[]" value="jaja2" />jaja2

Answer 3

Вы можете запросить селекторы с указанными c классами и атрибутами, используя querySelectorAll .

Попробуйте следующее:

function b() {
  var checkedInputs = document.querySelectorAll("input.your-class-name[type='checkbox']:checked");
  alert((checkedInputs.length === 1 ? "is" : "are") + " checked!");
}