Necromancing : 다음
과 같은 체크 박스 구조의 경우 jQuery 없이 :
<label>
<input type="checkbox" id="mytrackers_1" name="blubb_1" value="">--- Bitte auswählen ---
</label>
<label>
<input type="checkbox" id="mytrackers_2" name="blubb_2" value="7">Testtracker
</label>
<label>
<input type="checkbox" id="mytrackers_3" name="blubb_3" value="3">Kundenanfrage
</label>
<label>
<input type="checkbox" id="mytrackers_4" name="blubb_4" value="2">Anpassung
</label>
<label>
<input type="checkbox" id="mytrackers_5" name="blubb_5" value="1" checked="checked" >Fehler
</label>
<label>
<input type="checkbox" id="mytrackers_6" name="blubb_6" value="4">Bedienung
</label>
<label>
<input type="checkbox" id="mytrackers_7" name="blubb_7" value="5">Internes
</label>
<label>
<input type="checkbox" id="mytrackers_8" name="blubb_8" value="6">Änderungswunsch
</label>
다음과 같이 할 수 있습니다.
/// attach an event handler, now or in the future,
/// for all elements which match childselector,
/// within the child tree of the element maching parentSelector.
function subscribeEvent(parentSelector, eventName, childSelector, eventCallback) {
if (parentSelector == null)
throw new ReferenceError("Parameter parentSelector is NULL");
if (childSelector == null)
throw new ReferenceError("Parameter childSelector is NULL");
// nodeToObserve: the node that will be observed for mutations
var nodeToObserve = parentSelector;
if (typeof (parentSelector) === 'string')
nodeToObserve = document.querySelector(parentSelector);
var eligibleChildren = nodeToObserve.querySelectorAll(childSelector);
for (var i = 0; i < eligibleChildren.length; ++i) {
eligibleChildren[i].addEventListener(eventName, eventCallback, false);
} // Next i
// /programming/2712136/how-do-i-make-this-loop-all-children-recursively
function allDescendants(node) {
if (node == null)
return;
for (var i = 0; i < node.childNodes.length; i++) {
var child = node.childNodes[i];
allDescendants(child);
} // Next i
// IE 11 Polyfill
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector;
if (node.matches) {
if (node.matches(childSelector)) {
// console.log("match");
node.addEventListener(eventName, eventCallback, false);
} // End if ((<Element>node).matches(childSelector))
// else console.log("no match");
} // End if ((<Element>node).matches)
// else console.log("no matchfunction");
} // End Function allDescendants
// Callback function to execute when mutations are observed
var callback = function (mutationsList, observer) {
for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
var mutation = mutationsList_1[_i];
// console.log("mutation.type", mutation.type);
// console.log("mutation", mutation);
if (mutation.type == 'childList') {
for (var i = 0; i < mutation.addedNodes.length; ++i) {
var thisNode = mutation.addedNodes[i];
allDescendants(thisNode);
} // Next i
} // End if (mutation.type == 'childList')
// else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.');
} // Next mutation
}; // End Function callback
// Options for the observer (which mutations to observe)
var config = { attributes: false, childList: true, subtree: true };
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(nodeToObserve, config);
} // End Function subscribeEvent
function radioCheckbox_onClick()
{
// console.log("click", this);
let box = this;
if (box.checked)
{
let name = box.getAttribute("name");
let pos = name.lastIndexOf("_");
if (pos !== -1) name = name.substr(0, pos);
let group = 'input[type="checkbox"][name^="' + name + '"]';
// console.log(group);
let eles = document.querySelectorAll(group);
// console.log(eles);
for (let j = 0; j < eles.length; ++j)
{
eles[j].checked = false;
}
box.checked = true;
}
else
box.checked = false;
}
// /programming/9709209/html-select-only-one-checkbox-in-a-group
function radioCheckbox()
{
// on instead of document...
let elements = document.querySelectorAll('input[type="checkbox"]')
for (let i = 0; i < elements.length; ++i)
{
// console.log(elements[i]);
elements[i].addEventListener("click", radioCheckbox_onClick, false);
} // Next i
} // End Function radioCheckbox
function onDomReady()
{
console.log("dom ready");
subscribeEvent(document, "click",
'input[type="checkbox"]',
radioCheckbox_onClick
);
// radioCheckbox();
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", onDomReady, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", onDomReady);
else window.onload = onDomReady;
function onPageLoaded() {
console.log("page loaded");
}
if (window.addEventListener) window.addEventListener("load", onPageLoaded, false);
else if (window.attachEvent) window.attachEvent("onload", onPageLoaded);
else window.onload = onPageLoaded;