如何使復選框包含值 :checked (boolean)？

Question

我想讓復選框輸入具有取決於 :checked 的動態值。

如果復選框被選中，則值為“true”

<input type="checkbox" value="true" checked="checked">

或如果復選框未選中，則值為“false”

<input type="checkbox" value="false">

我這樣做是因為我通過 ajax 提交表單並且我正在使用 jQuery.searialize()

這個字段更像是一個開關。

是否可以？ 謝謝！

Answer 1

jQuery 方式

 $('[data-switchval]').change(function() { $(this).val($(this).prop('checked')); console.log('current value of checkbox:', $(this).val()) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" data-switchval value="true" checked="checked">

[后記] 剛剛意識到這個問題被標記為 jQuery……這是 vanillaJS 版本。

 document.querySelector('[data-switchval]').addEventListener('change', e => { e.target.value = e.target.checked console.log('current value of checkbox:', e.target.value) })

 <input type="checkbox" data-switchval value="true" checked="checked">

Answer 2

您可以為更改事件添加事件偵聽器。

 let checkbox = document.querySelector('input[type=checkbox]'); function setValue(checkbox){ checkbox.value = checkbox.checked; } setValue(checkbox); console.log(checkbox); checkbox.addEventListener('change', ()=>{ setValue(checkbox); console.log(checkbox); });

 <input type="checkbox">

Answer 3

如果我理解這個問題，您想根據是否選中來更改復選框的值？ 這可以通過 AJAX 來完成。 您必須為復選框輸入添加一個 id ('#checkbox1')。

這是一種解決方案：

$('#checkbox-value').text($('#checkbox1').val());

$("#checkbox1").on('change', function() {
  if ($(this).is(':checked')) {
  $(this).attr('value', 'true');
  } else {
  $(this).attr('value', 'false');
  }

 $('#checkbox-value').text($('#checkbox1').val());
});

然后將其添加到您的代碼中以獲取值：

<div id="checkbox-value"></div>