如何通过使用jQuery测试复选框的高值和低值来选中复选框？

根据复选框的值测试和检查一组复选框时遇到问题。下面的示例显示了一些复选框，如果复选框的值高于选中的值，则应选中。如果该值等于或低于选中的值，则不应选中

我感谢你们的帮助

<label class="checkbox"><input type="checkbox" name="a" value="5"> One</label>
<label class="checkbox"><input type="checkbox" name="a" value="5"> two</label>
<label class="checkbox"><input type="checkbox" name="a" value="15"> three</label>
<label class="checkbox"><input type="checkbox" name="a" value="25"> four</label>

你可以这样试试

    var firstCheckboxVal = 0;
    $('input[type="checkbox"]').change(function (e) {

        if(firstCheckboxVal == 0) 
            firstCheckboxVal = $(this).val();
        else {
            if(parseInt($(this).val()) > parseInt(firstCheckboxVal)) 
                $(this).prop('checked', true);
            else
                $(this).prop('checked', false);
        }
    });

我不确定，但我认为这对你有用。

试试这个

我遇到了值是字符串而不是int的问题，所以我在两个级别上都使用了

parseInt

来解决这个问题

$('input[type="checkbox"]').click(function (e) {

    var $value = parseInt($(this).val());
    var $siblings = $('input[name="' + $(this).attr("name") + '"]').not(":checked");

    $.each($siblings, function (i, input) {
         var _this = parseInt(input.value);
         if(_this > $value){
             input.checked = true;
         }
    })
});

---

JSFIDDLE

此示例将选中值大于或等于选中复选框值的所有复选框。 取消选中时，值大于它的所有框将保持选中状态，值小于它的所有框将取消选中

如果在同一父容器中有所有同级复选框元素，则可以使用

.sibles（）

函数迭代所有同级复选框元素

复选框值以字符串的形式返回，因此我使用

parseInt（）

将它们转换为数字，然后再相互比较

$(function () {
    $('input[type="checkbox"]').change(function (e) {
        var checked = $(this).is(":checked");
        var checkedValue = $(this).val();
        var siblings = $('input[type=checkbox]');

        siblings.each(function () {
            var siblingValue = parseInt($(this).val());
            //if checked, then check all boxes with values > checkedValue
            //if unchecked, then uncheck all boxes with values <= checkedValue
            $(this).prop('checked', 
                         (checked && (siblingValue >= checkedValue)) || 
                         (!checked && (siblingValue > checkedValue)));
        });
    });
});

$（函数（）{
$（'input[type=“checkbox”]”）。更改（函数（e）{
var checked=$（this）.is（“：checked”）；
var checkedValue=$（this.val（）；
变量同级=$（'input[type=checkbox]'）；
兄弟。每个（函数（）{
var siblingValue=parseInt（$（this.val（））；
//如果选中，则选中值>checkedValue的所有框
//如果未选中，则取消选中值为checkedValue）的所有框
（！checked&（同级值>checkedValue））；
});
});
});

您可以这样做

$（'input[type=“checkbox”]”）。更改（函数（e）{
var$value=parseInt（$（this.val（））；
var$sides=$（'input[name=“”+$（this）.attr（“name”）+“]：选中”）。而不是（$（this））；
var isCheck=true；
$兄弟姐妹。每个（功能（i）{
var a=$（this.val（）| | 0；
如果（$value，则应该这样做。首先查找选中的最高值，然后取消选中该值是否小于或等于当前复选框

请记住，
.val（）
返回集合中第一个的值，从而进行排序


$（':checkbox[name=a]'）。在（'change'，function（）上{
var max=+$（':checkbox[name=a]：checked'）.not（this）.sort（函数（a，b）{
返回+b.值-+a.值；
}).val（）；
如果（+this.value试试这个

$("input[type='checkbox']").change(function (e) {
    if (!$(this).is(":checked")) return;

    var siblings = $("input[name='" + $(this).attr("name") + "']");
    var value = parseInt($(this).val());
    var elements  = $("input[name='" + $(this).attr("name") + "']:not(:checked)");

    $.each(elements, function (index, element) {
        if (value > parseInt($(element).val())) {
            $(element).prop('checked', true);
        }
        else {
            $(element).prop("checked", false);
        }
    })
});

这里还有一个JSFIDLE。
我不喜欢您的jQuery，因为它与html紧密耦合。我的答案是将您的复选框解耦（基于）

HTML


当前正在发生的情况？？那么，您希望选中具有最高值的复选框吗？
如果（$value！=input.value）
则至少有2个复选框将返回true如果未选中，则会发生这种情况？？复选框值为
typeof==“string”
，因此您应该使用。
$('input[type="checkbox"]').change(function (e) {

    var $value = parseInt($(this).val());
    var $siblings = $('input[name="' + $(this).attr("name") + '"]:checked').not($(this));
    var isCheck = true;

    $siblings.each(function (i) {
        var a = $(this).val() || 0;

        if ($value <= a) {
            isCheck = false;
        }
    });

    $(this).prop("checked", isCheck);
});

$("input[type='checkbox']").change(function (e) {
    if (!$(this).is(":checked")) return;

    var siblings = $("input[name='" + $(this).attr("name") + "']");
    var value = parseInt($(this).val());
    var elements  = $("input[name='" + $(this).attr("name") + "']:not(:checked)");

    $.each(elements, function (index, element) {
        if (value > parseInt($(element).val())) {
            $(element).prop('checked', true);
        }
        else {
            $(element).prop("checked", false);
        }
    })
});

<div class="js-checker-group">
<label class="checkbox"
  <input class="js-checker-item" type="checkbox" name="a" value="5">
  One
</label>
<label class="checkbox">
  <input class="js-checker-item" type="checkbox" name="a" value="5">
  two
</label> 
<label class="checkbox">
  <input class="js-checker-item" type="checkbox" name="a" value="15">
  three
</label>
<label class="checkbox">
  <input class="js-checker-item" type="checkbox" name="a" value="25">
  four
</label>
</div>

$('.js-checker-group input[type="checkbox"].js-checker-item')
  .change(function (e) 
{
  var $this = $(this);
  var $group = $this.closest('.js-checker-group');
  var thisValue = parseInt($this.val());
  if ($group.length == 1
     && $this.prop('checked')
     && !isNaN(thisValue)) 
  {
    $group.find('input[type="checkbox"].js-checker-item')
      .each(function()
    {
      var $other = $(this);
      var otherValue = parseInt($other.val());
      if (!isNaN(otherValue) && !$this.is($other))
      {
        var isGreater = otherValue < thisValue;
        $other.prop('checked', isGreater);
      }
    });
  }
});