动态调用类名的JavaScript函数

Question

我的目标是，当用户单击复选框时，它将统计有多少个带有相同类名的选中输入。 我试图将vare发送到counting函数中，但我不确定语法是否正确。 当我用一个类名替换这里的e:var n=$('.e:checked').length；时，它是正常的。 但我需要它是动态的。

编辑以下问题:如何在PHP中从控制台日志获取值到var？

查看

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

JavaScript

js prettyprint-override">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

我已经为你的问题“维多利亚的秘密”做了一个工作片段。 注释在代码段本身中提到。 看看这能不能解决你的问题。

null

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 2

您可以使用QuerySelectorAll查询具有特定类和属性的选择器。

请尝试以下操作:

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

Answer 3

删除onclick=“b(this.classname)”。 在全局级别定义CountChecked。 使用$（“input[type=checkbox]”）。on（“click”，countChecked）；设置click事件。 然后可以在CountChecked中使用this.classname。 会很好用的。 查看

<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);