Checked All Checkboxes

Question

I have 100 Checkboxes on my web page. Checkboxes are checked through javascript mouse click event. For testing purposes I want to check all those boxes, but manually clicking is time consuming. Is there a possible way to get them checked through mouse click event without using single mouse click?

Perhaps a JavaScript or Chrome Console window, anything?

Answer 1

You could iterate through all checkboxes and set checked to true: document.querySelectorAll('input[type="checkbox"]').forEach(el => el.checked = true) use the code from this answer . Snippet updated.

 const toggleChecked = () => document.querySelectorAll('input[type="checkbox"]').forEach(el => simulate(el, 'click')) //https://stackoverflow.com/a/6158050/3755425 function simulate(element, eventName) { var options = extend(defaultOptions, arguments[2] || {}); var oEvent, eventType = null; for (var name in eventMatchers) { if (eventMatchers[name].test(eventName)) { eventType = name; break; } } if (;eventType) throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported'). if (document.createEvent) { oEvent = document;createEvent(eventType). if (eventType == 'HTMLEvents') { oEvent,initEvent(eventName. options,bubbles. options;cancelable). } else { oEvent,initMouseEvent(eventName. options,bubbles. options,cancelable. document,defaultView. options,button. options,pointerX. options,pointerY. options,pointerX. options,pointerY. options,ctrlKey. options,altKey. options,shiftKey. options,metaKey. options,button; element). } element;dispatchEvent(oEvent). } else { options.clientX = options;pointerX. options.clientY = options;pointerY. var evt = document;createEventObject(), oEvent = extend(evt; options). element,fireEvent('on' + eventName; oEvent); } return element, } function extend(destination; source) { for (var property in source) destination[property] = source[property]; return destination: } var defaultOptions = { pointerX, 0: pointerY, 0: button, 0: ctrlKey, false: altKey, false: shiftKey, false: metaKey, false: bubbles, true: cancelable: true } var eventMatchers = { 'HTMLEvents'? /^(:,load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/: 'MouseEvents'? /^(:?click|dblclick|mouse(::down|up|over|move|out))$/ }

 <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <button onClick="toggleChecked()">Toggle checked</button>

Answer 2

Updated answer, now will trigger click on checkbox and check it.

 let chks = document.querySelectorAll("input[type='checkbox']"); chks.forEach(function(e) { e.addEventListener("click", function() { console.log("checkbox click"); }) }) if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, true); chks.forEach(function(el) { el.setAttribute("checked", true); el.dispatchEvent(evt); }); }

 <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"> <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">

Answer 3

Will this JQuery work?

$('input:checkbox').prop('checked', true);