This particular plugin is designed to enhance the appearance of checkbox inputs. It creates a more visually appealing version of standard checkboxes. However, I have encountered an issue with one of the variables in the code.
Let's discuss the theLabelSpinner variable. This variable is meant to represent a <span> element that is inserted into the label associated with the checkbox using jQuery. The spinner should move to the right when the checkbox is checked and stay on the left when it is unchecked.
The problem I am facing arises when attempting to invoke jQuery functions on this element. Despite successfully logging both elements without any errors in the console, the expected behavior does not occur.
(function($) {
$.fn.bvCheckbox = function(customOptions) {
this.each(function(i) {
var theEl = $(this);
theID = theEl.attr('id');
theName = theEl.attr('name');
theClass = theEl.attr('class');
var theLabel = $("label[for='" + theID + "']");
theLabelText = theLabel.text();
theLabelSpinner = theLabel.children('span.bv-jquery-checkbox-label-spinner');
function init() {
prepareCheckbox();
initStates();
}
init();
function prepareCheckbox() {
theLabel.empty();
theEl.hide();
theLabel.addClass('bv-jquery-checkbox-label');
theLabel.append('<span class="bv-jquery-checkbox-label-spinner"></span>')
}
function initStates() {
if (!currentState(theEl)) {
console.log(theLabelSpinner);
theLabelSpinner.hide();
}
}
function currentState() {
if (theEl.is(":checked")) {
return 1;
} else {
return 0;
}
}
});
}
}(jQuery));
The issue arises within the initStates function which is supposed to set the initial position of the spinner based on the checkbox state. Despite trying basic jQuery functions like .hide(), nothing seems to work as expected. Upon logging the spinners, the following output is received:
[prevObject: x.fn.x.init[1], context: document, jquery: "1.10.2", constructor:function, init: function…] script.js:78
[prevObject: x.fn.x.init[1], context: document, jquery: "1.10.2", constructor:function, init: function…] script.js:78
This indicates that both elements were logged successfully, confirming their existence. Could someone help me troubleshoot this issue? Your assistance would be greatly appreciated. To see the full script in action, please visit this link: Full Script