[英]How to “check” certain checkboxes only using Jquery?
I have a HTML form containing checkboxes in the form of .. 我有一个HTML表单,其中包含以...形式的复选框。
<input type="checkbox" name="range[]" class="range_opts" id="range-1" value="1" /> 1 <br />
<input type="checkbox" name="range[]" class="range_opts" id="range-2" value="2" /> 2 <br />
<input type="checkbox" name="range[]" class="range_opts" id="range-3" value="3" /> 3 <br />
...
...
<input type="checkbox" name="range[]" class="range_opts" id="range-28" value="28" /> 28<br />
<input type="checkbox" name="range[]" class="range_opts" id="range-29" value="29" /> 29<br />
<input type="checkbox" name="range[]" class="range_opts" id="range-30" value="30" /> 30<br />
With this JS Code I Select all or Deselect all checkboxes 使用此JS代码我选择全部或取消选中所有复选框
$('#select_all_ranges').click(function() {
$('input[name="range[]"]').each(function() {
this.checked = true;
});
});
$('#deselect_all_ranges').click(function() {
$('input[name="range[]"]').each(function() {
this.checked = false;
});
});
But I need the functionality where user would be able to have certain checkboxes selected, depending upon the input 但我需要的功能是用户能够根据输入选择某些复选框
<input type="text" name="from_range" id="frm_range" />
<input type="text" name="to_range" id="to_range" />
<img src="icon.png" id="range123" />
so if user inputs from 5 to 20 and clicks on icon it checks checkboxes from 5-20. 因此,如果用户输入5到20并点击图标,则会检查5-20的复选框。
Can you please help me some ideas how this can be achieved. 能否帮助我一些如何实现这一目标的想法。 I can alter markup to apply some classes/selecter ids etc if you suggest, if it would make it any easier.
如果你建议,我可以改变标记来应用一些类/选择id等,如果它会使它更容易。 And I understand that this functionality is for users having javascript enabled browsers.
我知道这个功能适用于使用支持JavaScript的浏览器的用户。
Thanks. 谢谢。
$("#range123").click(function() {
var from = $("#frm_range").val();
var to = $("#to_range").val();
var expr = ":checkbox.range_opts:lt(" + to + ")";
if (from > 1) {
expr += ":gt(" + (from-1) + ")";
}
$(expr).attr("checked", true);
});
How about: 怎么样:
$('#range123').click(function() {
var bottom = $("#frm_range").value;
var top = $("#to_range").value;
$('input[name="range[]"]').each(function() {
this.checked = ((this.value > bottom) && (this.value < top));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.