这是 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 变量中。每个单词之间用空格或逗号分隔。怎么做?