我试图循环以下效果:效果我可以检查几个复选标记,当我选择"翻转"按钮,底部的复选标记将出现,对应于顶部复选框。我宁愿使用.each(function() {
循环。如何将下面的脚本代码转换为循环? (下面的代码确实有效,但我想把它变成一个循环。)谢谢你的时间和帮助。
下面的原始脚本:选择按钮翻转后,会选中相反的类复选标记,对应于 opposite_checkboxes
$(document).ready(function() {
var ID_top
var ID_btm
$("#copy").click(function() {
for (i = 1; i <= 6; i++) {
ID_top = "#A" + i;
ID_btm = ID_top + "_flip";
if ($(ID_top).prop("checked")) {
$(ID_btm).prop("checked", "checked");
}
}
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table dir="rtl" class="not_opposite">
<tr>
<td class="dot_wrap">
<label for="A1"><span class="hidden">A-1</span>
<input type="checkbox" value="A1" name="A1" id="A1" tabindex="1" class="A">
<span aria-hidden="true"> </span>
</label>
</td>
<td class="dot_wrap">
<label for="A4"><span class="hidden">A-4</span>
<input type="checkbox" value="A4" name="A4" id="A4" tabindex="4" class="A">
<span aria-hidden="true"> </span>
</label>
</td>
</tr>
</table>
<div class="button_wrapper">
<button class="inline" id="copy">FLIP</button>
<button class="inline" id="clear">CLEAR</button>
</div>
<table class="opposite">
<tr>
<td class="dot_wrap">
<label for="A1_flip"><span class="hidden">A-1</span>
<input disabled="true" type="checkbox" value="A1" name="A1" id="A1_flip">
<span class="flip" aria-hidden="true"> </span>
</label>
</td>
<td class="dot_wrap">
<label for="A4_flip"><span class="hidden">A-4</span>
<input disabled="true" type="checkbox" value="A4" name="A4" id="A4_flip">
<span class="flip" aria-hidden="true"> </span>
</label>
</td>
</tr>
</table>
&#13;
答案 0 :(得分:1)
我宁愿使用.each(function(){loop。
您可以选择所有ID为以大写字母A开头且不带后缀_flip的复选框元素:
$(':checkbox[id^=A]:not([id$=_flip])')
为了使用每个循环你可以:
$(':checkbox[id^=A]:not([id$=_flip])').each(function(index, element) {
if (element.checked) {
$('#' + element.id + '_flip').prop('checked', true);
}
});
摘录:
$(document).ready(function() {
$("#copy").on('click', function (e) {
$(':checkbox[id^=A]:not([id$=_flip])').each(function(index, element) {
if (element.checked) {
$('#' + element.id + '_flip').prop('checked', true);
}
});
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table dir="rtl" class="not_opposite">
<tr>
<td class="dot_wrap">
<label for="A1"><span class="hidden">A-1</span>
<input type="checkbox" value="A1" name="A1" id="A1" tabindex="1" class="A">
<span aria-hidden="true"> </span>
</label>
</td>
<td class="dot_wrap">
<label for="A4"><span class="hidden">A-4</span>
<input type="checkbox" value="A4" name="A4" id="A4" tabindex="4" class="A">
<span aria-hidden="true"> </span>
</label>
</td>
</tr>
</table>
<div class="button_wrapper">
<button class="inline" id="copy">FLIP</button>
<button class="inline" id="clear">CLEAR</button>
</div>
<table class="opposite">
<tr>
<td class="dot_wrap">
<label for="A1_flip"><span class="hidden">A-1</span>
<input disabled="true" type="checkbox" value="A1" name="A1" id="A1_flip">
<span class="flip" aria-hidden="true"> </span>
</label>
</td>
<td class="dot_wrap">
<label for="A4_flip"><span class="hidden">A-4</span>
<input disabled="true" type="checkbox" value="A4" name="A4" id="A4_flip">
<span class="flip" aria-hidden="true"> </span>
</label>
</td>
</tr>
</table>
&#13;
答案 1 :(得分:0)
您可以遍历顶部的那些,并且对于每个选中的,您可以检查底部的相应内容。
对于.not_opposite
中包含的每个复选框元素,如果已选中,则将其放在.opposite
中包含的复选框中。否则,你把它拿出来。由于prop接受布尔值,因此您可以使用三元运算符来快速完成。
var flipCheckbox = function(){
$('.not_opposite [type=checkbox]').each(function(index){
// Selecting opposite checkbox
// With the same selection index as the loop current one
// Setting prop to true/false according to current loop
$('.opposite [type=checkbox]').eq(index)
.prop('checked', $(this).is(':checked') ? true : false);
});
};
$('#copy').on('click', flipCheckbox);