Question

我正在尝试使用复选框值填充两个文本字段。它将从复选框中获取最小和最大数据属性值，查找最高和最低数字，并使用此值设置输入字段。如果未选中所有复选框，则将设置默认值。

例如，如果选中50-100和200-300选项，则最小输入将设置为50，最大输入字段将设置为300

var lowest = +Infinity;
var highest = -Infinity;

 $("input[type='checkbox']").on('click', function () {
    if ($(this).filter(':checked').length > 0) {
        lowest = Math.min(lowest, parseFloat($(this).attr("data-min")));
        highest = Math.max(highest, parseFloat($(this).attr("data-max")));
        $("#price-min").val(lowest);
        $("#price-max").val(highest);
    } else {
        $("#price-min").val(1);
        $("#price-max").val(150000);
    }
});

这是我的HTML：

<input id="price-min" type="text" value="0">
<input id="price-max" type="text" value="0"><br><br>
<input type="checkbox" data-min="50" data-max="100">50-100<br>
<input type="checkbox" data-min="100" data-max="200">100-200<br>
<input type="checkbox" data-min="200" data-max="300">200-300

https://jsfiddle.net/fpooysad/

Answer 1

$(document).ready(function () {

     $("input[type='checkbox']").on('click', function () {
        var allChecked = $("input[type='checkbox']").filter(':checked');
        if (allChecked.length > 0) {
            var lowest = null;
            var highest = null;
            allChecked.each(function() {
                var low = parseFloat($(this).attr("data-min"));
                var high = parseFloat($(this).attr("data-max"));
                if (lowest == null || low < lowest) {
                    lowest = low;
                }
                if (highest == null || high > highest) {
                    highest = high;
                }
            });
            $("#price-min").val(lowest);
            $("#price-max").val(highest);
        } else {
            $("#price-min").val(1);
            $("#price-max").val(150000);
        }
    });

Answer 2

在:checkbox的更改事件中，使用min方法将所有已检查的max和map()值替换为两个数组，然后使用sort()对这两个数组进行排序

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="price-min" type="text" value="0">
<input id="price-max" type="text" value="0">
<br>
<br>
<input type="checkbox" data-min="50" data-max="100">50-100
<br>
<input type="checkbox" data-min="100" data-max="200">100-200
<br>
<input type="checkbox" data-min="200" data-max="300">200-300


<script>
    $("input[type='checkbox']").change(function () {
        var min = $('input:checkbox:checked').map(function () { return $(this).data('min') }).get().sort(function (a, b) { return a - b });
        var max = $('input:checkbox:checked').map(function () { return $(this).data('max') }).get().sort(function (a, b) { return b - a });

        if (min.length) {
            $("#price-min").val(min[0]);
            $("#price-max").val(max[0]);
        } else {
            $("#price-min").val(1);
            $("#price-max").val(150000);
        }
    });
</script>

＆＃13;

Answer 3

$(document).ready(function () {
  $("input[type=checkbox]").click(function() {
    var maxArr = [], minArr = [];
    var getMax = 15000, getMin = 0;
    $("input[type=checkbox]:checked").each(function() {
        var getIndMax = $(this).attr("data-max");
      var getIndMin = $(this).attr("data-min");
      maxArr.push(getIndMax);
      minArr.push(getIndMin);
    });
    if(minArr.length) {
        getMin = Math.min.apply(null, minArr);
    }
    if(maxArr.length) {
        getMax = Math.max.apply(null, maxArr);
    }
    $("#price-min").val(getMin);
    $("#price-max").val(getMax);
  });
});

https://jsfiddle.net/fpooysad/2/

使用的条款

.push用于在数组中添加值，在这种情况下，数组变量为maxArr和minArr

Math.min＆amp; .max是考虑数组中的最大值和最小值

Answer 4

这必须帮助你

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price-min" type="text" value="0">
<input id="price-max" type="text" value="0">
<br>
<br>
<input type="checkbox" data-min="50" data-max="100">50-100
<br>
<input type="checkbox" data-min="100" data-max="200">100-200
<br>
<input type="checkbox" data-min="200" data-max="300">200-300

＆＃13;

Xs

＆＃13;

这是Working JSfiddle

使用复选框jQuery填充输入字段

4 个答案: