Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <div class="FormUnit js_CheckAll">
        <legend>Checkbox label</legend>
        <span class="js_CheckAll-container"><!--Space for the 'check all' input--></span>
            <li class="FormUnit-option">
                <label class="FormUnit-label" for="ID1">
                <input class="FormUnit-input js_CheckAll-checkbox" id="ID1" name="checkbox" type="checkbox"/>Option 1</label>
            <li class="FormUnit-option">
                <label class="FormUnit-label" for="ID2">
                <input class="FormUnit-input js_CheckAll-checkbox" id="ID2" name="checkbox" type="checkbox"/>Option 2</label>
            <li class="FormUnit-option">
                <label class="FormUnit-label" for="ID3">
                <input class="FormUnit-input js_CheckAll-checkbox" id="ID3" name="checkbox" type="checkbox"/>Option 3</label>
              .FormUnit-label {
	cursor: pointer;
              (function (win, doc) {
    'use strict';
    //Cut the mustard
    if (!doc.querySelector || !win.addEventListener) {
    //create an object called checkAll
    var CheckAll = function(rootElement) {
        //create a variable for the markup container
        var markupContainer;
        //create a variable and store the class for the container of the checkAll markup
        var markupContainerSelector = '.js_CheckAll-container';
        //create a property and store the markup for the checkAll input
        var checkAllMarkup = '<label for="check-all" class="FormUnit-label"><input class="js_Check-all" type="checkbox" name="check-all" id="check-all" />All</label>';
        //create a variable and store the check-all input class
        var checkAllSelector = '.js_Check-all';
        //create a variable to store selector for all checkboxes
        var allCheckboxesSelector = '.js_CheckAll-checkbox';
        //create a variable to store the markup
        var markup;
        //create a variable to store the checkAll button
        var checkAllButton;
        //create variable for all other checkboxes
        var allCheckboxes;
        //create a variable for one checkbox
        var checkbox;

        //create an init function
        this.init = function() {
            //get the markup of the checkbox container
            markupContainer = rootElement.querySelector(markupContainerSelector);
            //store the innerHTML of the markup container
            markup = markupContainer.innerHTML;
            //add the markup of the checkbox
            markup += checkAllMarkup;
            //update container with the new markup
            markupContainer.innerHTML = markup;
            //get the checkAll input
            checkAllButton = markupContainer.querySelector(checkAllSelector);
            //add an event listener to the 'All' button
            checkAllButton.addEventListener('click', All, false);
			//Get all the checkboxes apart from the 'All' checkbox
			allCheckboxes = rootElement.querySelectorAll(allCheckboxesSelector);
			//Get the number of checkboxes
            var total = allCheckboxes.length;
			//Loop through the checkboxes
            var i;
            for ( i = 0; i < total; i = i + 1 ) {
                checkbox = allCheckboxes[i];
				//add a click event listener which goes to the uncheckAll function
                checkbox.addEventListener('click', uncheckAll, false);
        //create a function to select all of the checkboxes
        var All = function(ev) {
            //store all checkboxes
            allCheckboxes = rootElement.querySelectorAll(allCheckboxesSelector);
            //store the length of the checkboxes array
            var total = allCheckboxes.length;
            //set a counter for the loop
            var i;
            //if this is checked
            if (this.checked) {
                //loop through each checkbox
                for ( i = 0; i < total; i = i + 1 ) {
                    checkbox = allCheckboxes[i];
                    checkbox.checked = true;
					//check each checkbox
            } else {
                for ( i = 0; i < total; i = i + 1 ) {
                    checkbox = allCheckboxes[i];
                    checkbox.checked = false;
					//uncheck each checkbox
		//Uncheck the 'All' checkbox if one of the checkboxes is unticked
		var uncheckAll = function(ev) {
			//Get the 'All' checkbox
            checkAllButton = markupContainer.querySelector(checkAllSelector);
			//if a checkbox is not ticked, untick the 'All' checkbox
            if (!this.checked) {
                checkAllButton.checked = false;

    //get all instances of checkAll on the page
    var checkAlls = doc.querySelectorAll('.js_CheckAll');
    //store total number of checkAll on the page
    var checkAllsTotal = checkAlls.length;
    //variable to store one of the checkAll
    var checkAll;
    //create a counter for the loop
    var i;
    //loop through each check-all group
    for ( i = 0; i < checkAllsTotal; i = i + 1 ) {
        //create a new object for each checkAll group
        checkAll = new CheckAll(checkAlls[i]);
        //start init
}(this, this.document));
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.