I am looking to modify the JavaScript Code provided to work. I have tried on Laserfiche 11 and 12 and it doesn't check or uncheck the checkbox fields when I click the button. 

JavaScript:

    	window.markAllCheckboxes = function () {
	  var allCheckboxes = LFForm.findFieldsByClassName("selectAllCheckboxes");
	  allCheckboxes.forEach(function(el) {
	    var allCheckboxesOptions = el.options;
	    var allCheckboxesValues = [];
	    allCheckboxesOptions.forEach(function(el) {
	      allCheckboxesValues.push(el.value);
	    });
	    LFForm.setFieldValues(el, {value: allCheckboxesValues});
	  });
	};
	//When the button is clicked to unmark all boxes, run this function.
	//Loop through each field with the selectAllCheckboxes class and clear all values.
	window.unmarkAllCheckboxes = function () {
	  var allCheckboxes = LFForm.findFieldsByClassName("selectAllCheckboxes");
	  allCheckboxes.forEach(function(el) {
	    LFForm.setFieldValues(el, "");
	  });
	};

CSS: - Is working

// Day 19
	// General styles for checkboxes
		input[type="checkbox"] {
	    appearance: none; // Remove default styling 
	    margin: 0 10px 0 0; // Adjust margin
	    width: 20px; // Set width 
	    height: 20px; // Set height 
	    border: 2px solid #4CAF50; // Border color 
	    border-radius: 4px; // Rounded corners 
	    display: inline-block;
	    position: relative;
	    cursor: pointer;
	    transition: background-color 0.3s ease, border-color 0.3s ease; // Smooth transition
	}
// Styles for checked state
	input[type="checkbox"]:checked {
	    background-color: #4CAF50; // Background color when checked 
	    border-color: #4CAF50; // Border color when checked
	    animation: checkmark 0.3s ease-in-out; // Apply checkmark animation 
	}
// Custom checkmark 
	input[type="checkbox"]:checked::after {
	    content: '✔'; // Checkmark character 
	    color: white; // Checkmark color 
		font-size: 16px; // Checkmark size
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%); // Center the checkmark 
	    opacity: 0;
	    animation: fadeIn 0.3s forwards; // Fade-in animation 
	}
@keyframes fadeIn {
	    to {
	        opacity: 1;
	    }
	}
@keyframes checkmark {
	    0% {
	        transform: scale(0);
	    }
	    50% {
	        transform: scale(1.2);
	    }
	    100% {
	        transform: scale(1);
	    }
	}
// Hover effect 
	input[type="checkbox"]:hover {
	    border-color: #45a049; // Border color on hover 
	}

		/* Color odd rows in collection */
		.fl-collection .collection-set:nth-child(Odd) {background-color: green;}
		/* Color even rows in collection */
		.fl-collection .collection-set:nth-child(Even) {background-color: grey;}
		/* Color even rows in table */
		table tr:nth-child(odd) td { background-color: #B0EA89; /* Light green */ }
		/* Color odd rows in table */
		table tr:nth-child(even) td { background-color: #E8E7E7; /* Light grey */ }

Screenshot JS:

Form: