JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="checkbox" id="box1" checked="checked" />Rose Tyler
<br />
<input type="checkbox" id="box1" />Martha Jones
<br />
<input type="checkbox" id="box1" checked="checked" />Amy Pond
<br />
<input type="checkbox" id="box1" checked="checked" />Sarah Jane Smith
<br />
<input type="checkbox" id="box1" />Donna Noble
<br />
<input type="checkbox" id="box1" checked="checked" />Clara Oswald
<br /> <a href="javascript:void(0);" id="state-checker">Check State</a>
</div>
JavaScript
$.fn.IsOriginalState = function () {
var data = $(this).prop("stateData");
if (data == null || data == undefined) {
data = {
OriginalState: $(this).prop("checked"),
CurrentState: $(this).prop("checked")
}
$(this).prop("stateData", data);
data = $(this).prop("stateData");
}
return data.OriginalState == data.CurrentState;
};
$(document).ready(function () {
$(document).bind("check-changed", function (e) {
var originalCount = 0;
$("input[type='checkbox']").each(function () {
if ($(this).IsOriginalState()) {
originalCount++;
}
});
var isOriginal = originalCount == $("input[type='checkbox']").length;
if (isOriginal) {
alert("Checkboxes are in their original state.");
} // end if
});
$("input[type='checkbox']").each(function () {
$(this).IsOriginalState(); //Set the initial values
});
$("input[type='checkbox']").change(function (data) {
$(this).prop("stateData").CurrentState = $(this).prop("checked");
$(document).trigger("check-changed");
});
$("#state-checker").click(function () {
var originalCount = 0;
$("input[type='checkbox']").each(function () {
if ($(this).IsOriginalState()) {
originalCount++;
}
});
var isOriginal = originalCount == $("input[type='checkbox']").length;
alert(isOriginal);
});
});