Заполнение поля ввода с помощью флажков jQuery

Question

Я пытаюсь заполнить два текстовых поля значениями флажка. Он получит значения атрибутов min и max данных из флажков, найдет наивысшие и самые низкие числа и задает поля ввода с этими значениями. Если все флажки сняты, значения по умолчанию будут установлены.

Например, если 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

В случае изменения в :checkbox принять все проверили min и max в двух массивах с использованием метода map(), а затем отсортируйте эти два массива с помощью sort().

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

Answer 2

$(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 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 & .max должен рассмотреть максимальные и минимальные значения в массиве

Answer 4

Это должно помочь вам

$(document).ready(function() { 
 

 
    $("input[type='checkbox']").on('change', function() { 
 
    var lowest =+Infinity; 
 
    var highest = 0; 
 
    $.each($("input[type='checkbox']:checked"),function(){ 
 
     lowest = parseInt($(this).data("min")) < lowest ?parseInt($(this).data("min")) : lowest; 
 
     highest = parseInt($(this).data("max")) > highest ?parseInt($(this).data("max")) : highest; 
 
    }); 
 
    
 
    if (lowest ==0 && highest ==0) { 
 
    $("#price-min").val(1); 
 
     $("#price-max").val(150000);  
 
    } else { 
 
     $("#price-min").val(lowest); 
 
    $("#price-max").val(highest); 
 
    } 
 
    }); 
 
});

<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

А вот Working JSfiddle