Highlighting between two data points on a scale

Highlighting between two data points on a scale

I have a php generated scale table from 1 to 14. I highlight the min and max values given by the checkbox form on the table with the following jquery code.

This is the jquery code I'm using to highlight two points on the scale table.

  1. $("#checkAll").click(function() {
  2.   $('input:checkbox').not(this).prop('checked', this.checked)
  3.     .trigger("change");
  4. });

  6. $(".selector").on("change", function() {
  7.   var parent = $(this).closest("form");

  9.   $("#" + parent.data("checktable"))
  10.     .find('[dbval="' + this.name + '"]')
  11.     .toggleClass("highlight", $(this).is(":checked"));
  12.   parent
  13.     .find(".all")
  14.     .prop(
  15.       "checked",
  16.       parent.find(".selector:checked").length === parent.find(".selector").length
  17.     );
  18. });

  20. $(".all").on("change", function() {
  21.   $(this).closest("form").find(".selector")
  22.     .prop("checked", $(this).is(":checked"))
  23.     .trigger("change");
  24. });

  26. $(".all:checked").each(function() {
  27.   $(this).closest("form").find(".selector").prop("checked", true).trigger("change");
  28. });

  30. $(".selector").trigger("change");

Normally I mostly have two values (min and max), but sometimes there happens to be a single value (either min or max) to be highlighted, or no values at all (no highlight). I need to highlight not only the min and max values but all the values between the minimum and maximum values.

For example if (min,max) is (2,8), then 2,3,4,5,6,7, and 8 should be highlighted. How can I get this result? Thanks.


    • Topic Participants

    • mri.8