工作:Here
我想知道如何改变它,以便它可以与表单的特定部分一起使用,而不是全部。
我设法让它只使用ID,但不是类。
到目前为止我已经知道了:
$('.weeks').bind('keyup change',function(){
// get elements that are empty.
var empty = $('.weeks').map(function(index, el) {
return !$(el).val().length ? el : null;
}).get();
// could also be placed outside of the function
var tick = $('#tick3');
var cross = $('#cross3');
// check if there are any empty elements, if there are none, show numbers, else hide number.
!empty.length ? tick.show() : tick.hide();
!empty.length ? cross.hide() : cross.show();
});
这是html:
<span class="checked tick" id="tick3"><img src="http://www.clker.com/cliparts/9/d/J/p/D/g/check-grey-md.png" width="38px" style="margin-top: -10px;" /></span>
<span class="checked" id="cross3"><img src="http://mypad.northampton.ac.uk/12402247/files/2014/02/red-wrong-cross-hi-23y1kex.png" width="38px" style="margin-top: -10px;" /></span>
<table>
<tr class="bottom">
<td>
<input type="checkbox" id="allWeeks" class="weeks" name="all" onClick="allWeeks(this)"></input>
<label for="allWeeks">1-15</label>
</td>
<td>
<input type="checkbox" id="defWeeks" class="weeks" checked name="default" onClick="defaultWeeks(this)"></input>
<label for="defWeeks">1-12</label>
</td>
<td>
<input type="checkbox" id="oddWeeks" class="weeks" name="odd" onClick="oddWeeks(this)"></input>
<label for="oddWeeks">Odd</label>
</td>
<td>
<input type="checkbox" id="evenWeeks" class="weeks" name="even" onClick="evenWeeks(this)"></input>
<label for="evenWeeks">Even</label>
</td>
<td colspan="2">
<button id="clearWeeks">Clear</button>
</td>
</tr>
<tr class="bottom">
<td>
<input type="checkbox" id="1" class="weeks all_weeks default_weeks odd_weeks" checked name="1" onClick="changed_check();"></input>
<label for="1">1</label>
</td>
<td>
<input type="checkbox" id="2" class="weeks all_weeks default_weeks even_weeks" checked name="2" onClick="changed_check();"></input>
<label for="2">2</label>
</td>
<td>
<input type="checkbox" id="3" class="weeks all_weeks default_weeks odd_weeks" checked name="3" onClick="changed_check();"></input>
<label for="3">3</label>
</td>
<td>
<input type="checkbox" id="4" class="weeks all_weeks default_weeks even_weeks" checked name="4" onClick="changed_check();"></input>
<label for="4">4</label>
</td>
<td>
<input type="checkbox" id="5" class="weeks all_weeks default_weeks odd_weeks" checked name="5" onClick="changed_check();"></input>
<label for="5">5</label>
</td>
<td>
<input type="checkbox" id="6" class="weeks all_weeks default_weeks even_weeks" checked name="6" onClick="changed_check();"></input>
<label for="6">6</label>
</td>
</tr>
<tr class="bottom">
<td>
<input type="checkbox" id="7" class="weeks all_weeks default_weeks odd_weeks" checked name="7" onClick="changed_check();"></input>
<label for="7">7</label>
</td>
<td>
<input type="checkbox" id="8" class="weeks all_weeks default_weeks even_weeks" checked name="8" onClick="changed_check();"></input>
<label for="8">8</label>
</td>
<td>
<input type="checkbox" id="9" class="weeks all_weeks default_weeks odd_weeks" checked name="9" onClick="changed_check();"></input>
<label for="9">9</label>
</td>
<td>
<input type="checkbox" id="10" class="weeks all_weeks default_weeks even_weeks" checked name="10" onClick="changed_check();"></input>
<label for="10">10</label>
</td>
<td>
<input type="checkbox" id="11" class="weeks all_weeks default_weeks odd_weeks" checked name="11" onClick="changed_check();"></input>
<label for="11">11</label>
</td>
<td>
<input type="checkbox" id="12" class="weeks all_weeks default_weeks even_weeks" checked name="12" onClick="changed_check();"></input>
<label for="12">12</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="13" class="weeks all_weeks odd_weeks" name="13" onClick="changed_check();"></input>
<label for="13">13</label>
</td>
<td>
<input type="checkbox" id="14" class="weeks all_weeks even_weeks" name="14" onClick="changed_check();"></input>
<label for="14">14</label>
</td>
<td colspan="4">
<input type="checkbox" id="15" class="weeks all_weeks odd_weeks" name="15" onClick="changed_check();"></input>
<label for="15">15</label>
</td>
</tr>
</table>
我希望做的是,如果选中至少一个带有类周的复选框,则显示一个勾号,如果没有,则显示一个十字。
复选框和清除按钮的代码,所以1-12检查1-12等:
$(document).ready(function () {
$("#allWeeks").click(function () {
$(".all_weeks").prop('checked', $(this).prop('checked'));
$("#defWeeks").attr('checked', false);
$("#evenWeeks").attr('checked', false);
$("#oddWeeks").attr('checked', false);
});
$("#defWeeks").click(function () {
$(".all_weeks").attr('checked', false);
$(".default_weeks").prop('checked', $(this).prop('checked'));
$("#allWeeks").attr('checked', false);
$("#evenWeeks").attr('checked', false);
$("#oddWeeks").attr('checked', false);
});
$("#oddWeeks").click(function () {
$(".all_weeks").attr('checked', false);
$(".odd_weeks").prop('checked', $(this).prop('checked'));
$("#allWeeks").attr('checked', false);
$("#defWeeks").attr('checked', false);
$("#evenWeeks").attr('checked', false);
});
$("#evenWeeks").click(function () {
$(".all_weeks").attr('checked', false);
$(".even_weeks").prop('checked', $(this).prop('checked'));
$("#allWeeks").attr('checked', false);
$("#defWeeks").attr('checked', false);
$("#oddWeeks").attr('checked', false);
});
$("#clearWeeks").click(function () {
$(".all_weeks").attr('checked', false);
$("#allWeeks").attr('checked', false);
$("#defWeeks").attr('checked', false);
$("#oddWeeks").attr('checked', false);
$("#evenWeeks").attr('checked', false);
});
});
感谢任何帮助
答案 0 :(得分:1)
我不能说你想要做的很明显,但是肯定在复选框元素上调用.val()不会得到你想要的结果。这是一个很好的方法来获取应该工作的空数组(如未经检查的):
var empty = $('.weeks').filter(':not(:checked)');
您随后明确表示您想知道是否检查了任何方框,如果有,则显示复选标记;否则显示&#39; X&#39;。因此,您应该获得一系列已检查的元素,而不是空元素:
var checked = $('.weeks').filter(':checked');
然后相应地显示/隐藏图像:
checked.length ? tick.show() : tick.hide();
checked.length ? cross.hide() : cross.show();