主页 / 问题 / 1576948
Accepted
maindenis
Asked:2024-04-20 04:42:57 +0000 UTC2024-04-20 04:42:57 +0000 UTC

选择复选框时将列表添加到变量

  • 772

这是 HTML

$(".checkbox_3 input").on( "change", function() {
  templ = "";
  parent = $(this).closest(".checkboxes_wrapp");
  parent.find(".checkbox_3").each(function() {
    input = $(this).find("input");
    if(input.prop("checked") == true) {
      templ += input.val() +" ";
    }
    console.log(templ);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="checkboxes_wrapp">
  <div>
    <label class="checkbox_3">
      <input value="All Countries" type="checkbox" />
      <span>All Countries</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Afganistan" type="checkbox" />
      <span>Afganistan</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Algeria</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Angola</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Argentina</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Armenia</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Bahrain</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Barbados</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Country</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Country</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Country</span>
    </label>
  </div>
</div>

有必要在单击某个复选框时，将所有选中的复选框的值按照选中的顺序写入到 templ 变量中。每个单词之间用空格或逗号分隔。怎么做？

javascript

1 个回答

  1. Best Answer

    创建一个数组来存储结果。当您单击一个元素时，将其添加到数组或删除它。所以保持选择顺序。

    let result = [];
$(".checkbox_3 input").on("change", function() {
    let value = $(this).val();
    if ($(this).is(':checked')) {
        result.push(value);
    } 
    else {
        let idx = result.indexOf(value);
        result.splice(idx, 1);
    }  
    console.log(result.join(', '));  
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="checkboxes_wrapp">
  <div>
    <label class="checkbox_3">
      <input value="All Countries" type="checkbox" />
      <span>All Countries</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Afganistan" type="checkbox" />
      <span>Afganistan</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Algeria</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Angola" type="checkbox" />
      <span>Angola</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Argentina</span>
    </label>
  </div>


</div>

    • 0

相关问题