Question

因此，我有多个用于表单的复选框（实际上很多）。我使用的示例html代码如下所示：

<input type="checkbox" class="form-control" id="question1" value="0">
<input type="checkbox" class="form-control" id="question2" value="0">
<input type="checkbox" class="form-control" id="question3" value="0">
<input type="checkbox" class="form-control" id="question4" value="0">
<input type="checkbox" class="form-control" id="question5" value="0">

自从我使用JQuery以来，有没有一种方法可以动态更新被单击的复选框的值，不检查0，检查1？而不是仅为具有该ID的复选框创建特定的事件函数。

类似的东西：

    $("input.checkbox").on("click", function(){
        if ($(this).is(':checked')){
            $(this).val("1");
        }
        else{
            $(this).val("0");
        }
    })

Answer 1

您可以选择复选框并更改其值。 expression ? true-case : false-case是三元表达式，如果您不熟悉它们，则为内联形式。

$(':checkbox').on('click', function () {
  this.value = this.checked ? 1 : 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="form-control" id="question1" value="0">
<input type="checkbox" class="form-control" id="question2" value="0">
<input type="checkbox" class="form-control" id="question3" value="0">
<input type="checkbox" class="form-control" id="question4" value="0">
<input type="checkbox" class="form-control" id="question5" value="0">

Answer 2

当前，您没有复选框，名称为checkbox，没有类别。相反，您只分配了form-control类。您可以通过使用属性选择器来分配类或目标，这可能是您从一开始就尝试做的。

input[type=checkbox]

也值得注意。尽管click事件将起作用，但在这种情况下以及通常处理基于输入/值的元素的任何情况下，change()可能更合适。

$("input[type=checkbox]").on("change", function() {
  if ($(this).is(':checked')) {
    $(this).val("1");
  } else {
    $(this).val("0");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="form-control" id="question1" value="0">
<input type="checkbox" class="form-control" id="question2" value="0">
<input type="checkbox" class="form-control" id="question3" value="0">
<input type="checkbox" class="form-control" id="question4" value="0">
<input type="checkbox" class="form-control" id="question5" value="0">

动态更新单击的复选框的值

2 个答案: