我可以在同一个脚本上发布已选中和未选中的框值

Question

我想在同一个脚本上同时获取已选中和未选中的框值。我在我的脚本上使用的方法不起作用让我解决这个问题。我想在不使用提交按钮的情况下获得多个复选框值。是否可以获得复选框值的两种状态？

＆＃13;

＆＃13;

$("input[type=checkbox]").on("change", function() {
  var ids = [];
  var dis = [];
  $('input[type=checkbox]:checked').each(function() {
    ids.push($(this).val());
  });
  $('input[type=checkbox]:unchecked').each(function() {
    dis.push($(this).val());

  });
  //var allCheckboxes=$(".#form1").find(".check_list")
  //var unchecked=allCheckboxes.not(":checked");
  dis = dis.toString();
  ids = ids.toString();
  $.ajax({
    url: "dummyeodcheckbox.php",
    type: "POST",
    async: true,
    cache: false,
    data: ({
      value: ids,
      unchecked: dis
    }),
    dataType: "text",
    success: function(data) {
      alert("activitysubmitted");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" name="form1" id="form1">
  <div align="center" id="container">
    <table>
      <tr>
        <td>
          <p>S.NO</p>
        </td>
        <td>
          <p>Check Box</p>
        </td>
        <td>
          <p>Activity Name</p>
        </td>
      </tr>
      <tr>
        <td>
          1
        </td>
        <td>
          <input type="checkbox" class="check_list" name="checklist[]" value="Bod1" id="b1" <?php echo $status ?> />
        </td>
        <td>
          <label for="Bod1">BOD1 </label>
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          <input type="checkbox" class="check_list" name="checklist[]" value="Bod2" id="b2" <?php echo $status ?> />
        </td>
        <td>
          <label for="Bod2">BOD2 </label>
        </td>
      </tr>
      <tr>
        <td>
          3
        </td>
        <td>
          <input type="checkbox" class="check_list" name="checklist[]" value="Bod3" id="b3" <?php echo $status ?> />
        </td>
        <td>
          <label for="Bod3">BOD3</label>
        </td>
      </tr>
      <tr>
        <td>
          4
        </td>
        <td>
          <input type="checkbox" class="check_list" name="checklist[]" value="Bod4" id="b4" <?php echo $status ?> />
        </td>
        <td>
          <label for="Bod4">BOD4 </label>
        </td>
      </tr>
    </table>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是jQuery中没有:unchecked选择器。相反，您可以使用:not(:checked)，如下所示：

$('input[type=checkbox]:not(:checked)').each(function() {
  dis.push($(this).val());
});

我还建议您使用map()使数组构建更简洁，并使用join()数组而不是使用toString()。

$("input[type=checkbox]").on("change", function() {
  var ids = $('input[type=checkbox]:checked').map(function() {
    return this.value;
  }).get();
  var dis = $('input[type=checkbox]:not(:checked)').map(function() {
    return this.value;
  }).get()

  $.ajax({
    url: "dummyeodcheckbox.php",
    type: "POST",
    cache: false,
    data: ({
      value: ids,
      unchecked: dis,
    }),
    dataType: "text",
    success: function(data) {
      console.log("activitysubmitted");
    }
  });
});

您还应该考虑从AJAX请求中返回XML或JSON。 <{1}}可以通过空格不一致轻松打破。

Answer 2

您可以使用输入type="hidden"来存储复选框的值。