How can I validate checkboxes by checking their high and low values using jQuery?
I am having problems testing and validating a group of checkboxes based on their values. The example below shows some checkboxes where if the value of the checkbox is higher than the one that needs to be checked then it needs to be checked. If the value is equal to or lower than the one that was marked, then do not check.
I appreciate the help guys!
<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);
}
})
});
source to share
Try JSFIDDLE
I am having a problem with the value being a string and not an int, so I just used parseInt
to fix this on both levels.
$('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;
}
})
});
source to share
You can do
$('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))
captures the marked fields, not including what you clicked.
The loop each()
just sets the check flag and then you set the click window to check or not, depending on the result. This will also allow you to uncheck the box with a click
source to share
Try it;
$("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);
}
})
});
There's also a JSFiddle link here.
source to share
you can try like this
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);
}
});
I'm not sure, but I think it will work for you.
source to share
JSFIDDLE https://jsfiddle.net/seadonk/7wcs5sah/
This example will check all check boxes with a value greater than or equal to the value of the checked box, if it is checked. If it is not selected, all checkboxes with values greater than it will remain checked, and all fields with values less than it will be unchecked.
You can use a function .siblings()
to iterate over all sibling checkbox items if they are in the same parent container.
the checkbox values were returned as strings, so I used parseInt()
to convert them to numbers before comparing them to eachother.
$(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)));
});
});
});
source to share
This should do it. Start by defining the value for the highest value, and then clear the check box if the value is less than or equal to the current check box.
Be aware that the .val()
return value is the first in the collection, hence the sort.
$(':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>
source to share
I am not a fan of your jQuery because it is closely related to html. My answer would be to decouple your checkboxes (based on 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);
}
});
}
});
I would dissuade you from writing javascript that depends on the result, how you write your html in terms of siblings, parents, etc. One change can cause your javascript to not work at all.
source to share