Populate input field with checkboxes jQuery

Question

I am trying to populate two text fields with checkbox values. It will get the min and max data attribute values from the checkboxes, find the highest and lowest numbers, and set input fields with this values. If all checkboxes are unchecked, default values will be set.

For example if 50-100 and 200-300 options are checked, min input will be set to 50 and max input field will be set to 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);
    }
});

here is my 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/

Ibrahim Khan · Accepted Answer · 2016-02-27 18:09:46Z

In the change event of :checkbox take all checked min and max value in two array using map() method and then sort these two array using 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>

Martin Staufcik · Accepted Answer · 2016-02-27 18:08:19Z

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

ameenulla0007 · Accepted Answer · 2016-02-27 18:13:10Z

$(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/

Terms Utilized

.push is used in order to add a value in an array, in this case array vars are maxArr and minArr

Math.min & .max is to consider max and minimum values within an array

Rajshekar Reddy · Accepted Answer · 2016-02-27 18:14:22Z

-1

This must help you out

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

And here is Working JSfiddle

answered Feb 27, 2016 at 18:14

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

1 Comment

Rajshekar Reddy Over a year ago

Downvoters, please care to comment. Let me improve if there is a mistake, The snippet is working fine, The fiddle is working fine. Whats the problem?

Collectives™ on Stack Overflow

Populate input field with checkboxes jQuery

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related