javascript - 使用 onchange 函数获取复选框值

Question

我正在使用多个复选框进行某些操作。我的要求是获取on复选框是否选中以及off何时取消选中。但是我得到的值就像on我选中/取消选中复选框一样。

<label class="cont">
   <input type="checkbox" name="listingstatus" id="listingstatus<?php echo $doc->module_video_id; ?>" onchange="listingStatus('<?php echo $doc->module_video_id; ?>')">
   <span class="checkmark"></span>
</label>


function listingStatus(module_video_id)
{
  var a = $('#listingstatus'+module_video_id).val();
  console.log(a);
}

Answer 1

尝试is(":checked")使用三元运算符：

var a = $('#listingstatus'+module_video_id).is(":checked") ? 'on' : 'off';

Answer 2

使用普通的 Javascript，你会使用这样的东西：

btn.addEventListener('click', () => {
  const checkedInputs = Array.from(document.querySelectorAll('input:checked'));
  const values = [];
  checkedInputs.forEach((checkbox) => {
    values.push(checkbox.value);
  })
  console.log(values);
})

<input type="checkbox" value="foo" />
<input type="checkbox" value="bar" />
<input type="checkbox" value="baz" />
<input type="checkbox" value="wtf" />
<button type="button" id="btn">Console.log checked values</button>

如果您需要不同的东西，请尝试更清楚您的要求。

Answer 3

使用 .checked 而不是 .value：

 <input type="checkbox" id="chkBox" onchange="foo()">

<script>
function listingStatus()
{
  var isChecked = document.getElementById('chkBox').checked;
  console.log(isChecked);
}
</script>

Answer 4

您可以使用以下脚本检查是否选中了复选框

function listingStatus(module_video_id)
    {
        if ($('#listingstatus' + module_video_id).prop('checked')) {
            console.log('checked do stuff here');
        } else {
            console.log('not checked');
        }
    }