Question

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

我感谢帮助人员！

<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>

JS

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

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

            $.each($siblings, function (i, input) {

                console.log(input.value)


                if ($value != input.value) {
                    $(this).prop('checked', true);
                }
                else if ($value > input.value) {
                    $(this).prop('checked', true);
                }
                else if ($value >= input.value) {
                    $(this).prop('checked', true);
                }
                else {
                    $(this).prop("checked", false);
                }

            })
        });

Answer 1

你可以做到

http://jsfiddle.net/6kkchbor/

$('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[name="' + $(this).attr("name") + '"]:checked').not($(this))抓取复选框，不包括您点击的内容。

each()循环只是设置检查标志，然后根据结果设置单击框以进行检查。这也允许您取消选中点击的框

Answer 2

试试这个;

$("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);
        }
    })
});

这里还有一个JSFiddle link。

Answer 3

你可以这样尝试

    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);
        }
    });

我不确定，但我认为它适合你。

Answer 4

试试这个JSFIDDLE

我遇到的问题是值是字符串而不是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;
         }
    })
});

Answer 5

JSFIDDLE https://jsfiddle.net/seadonk/7wcs5sah/

此示例将检查所有复选框，其值大于或等于选中复选框时复选框的值。如果取消选中，则所有值大于它的框都将保持选中状态，并且所有值均小于它的框都将被取消选中。

如果您在同一个父容器中拥有它们，则可以使用.siblings()函数迭代所有同级复选框元素。

复选框值以字符串形式返回，因此我使用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)));
        });
    });
});

Answer 6

这应该这样做。首先查找已检查的最高值，然后取消选中此值是否小于或等于当前复选框。

请记住，.val()会返回集合中第一个的值，因此会进行排序。

$(':checkbox[name=a]').on('change', function() {
  var max = +$(':checkbox[name=a]:checked').not(this).sort(function(a,b) {
    return +b.value - +a.value;
  }).val();
  if( +this.value <= max ) {
     this.checked = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 7

我不是你的jQuery的粉丝，因为它与html紧密耦合。我的答案是将你的复选框分开（基于Philip Walton @ Google - Decoupling your Html, Css and Javascript）

HTML

<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>

jQuery的：

$('.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);
      }
    });
  }
});

我会劝阻你写javascript，这取决于你如何用兄弟姐妹，父母等编写你的html的结果。一个改变可能导致你的javascript根本不起作用。

JsFiddle Example

如何通过使用jQuery测试其高值和低值来检查复选框？

7 个答案: