window.ENTITIES={'/api/snippets/html/javascript%20-%20deselect%20input%20radio%20element%20on%20second%20click':[{"result":true,"message":null,"batch":{"type":"html","name":"javascript - deselect input radio element on second click","items":[{"id":"DlBRrj","type":"html","name":"JavaScript - deselect input radio element on second click","content":"// ONLINE-RUNNER:browser;\n\n<label>\n  <input id=\"my-input\" type=\"radio\" />\n  <span>Some label ...</span>\n</label>\n<script>\n\n    function findTarget(input) {\n        const labels = input.labels;\n        if (labels && labels.length > 0) {\n            return labels[0];\n        }\n        return input;\n    }\n  \n    function addOnBeforeClick(input, callback) {\n        const target = findTarget(input);\n        let pointer = false;  // mouse and touch gestures\n        target.addEventListener('mousedown', function(e) {\n            if (e.button === 0) {  // mouse primary button test (works also when user touches screen)\n                pointer = true;\n            }\n        });\n        target.addEventListener('mouseup', function(e) {\n            if (pointer) {\n                callback(e);\n            }\n        });\n        window.addEventListener('mouseup', function(e) {\n            pointer = false;\n        });\n        if (input.type === 'radio' || input.type === 'checkbox') {\n            let key = false;  // key gestures (when input is focused space selects/deselects checkbox/radio button)\n            target.addEventListener('keydown', function(e) {\n                if (e.code === 'Space') {\n                    key = true;\n                }\n            });\n            target.addEventListener('keyup', function(e) {\n                if (key) {\n                    callback(e);\n                }\n            });\n            window.addEventListener('keyup', function(e) {\n                key = false;\n            });\n        }\n    }\n\n    function configureDeselection(input) {\n        if (input.type === 'radio') {\n            let checked = false;\n            addOnBeforeClick(input, function() {\n                checked = input.checked;\n            });\n            input.addEventListener('click', function() {\n                input.checked = !checked;\n            });\n        }\n    }\n\n\n    // Usage example:\n\n    const element = document.querySelector('#my-input');\n\n    configureDeselection(element);\n\n</script>","source":"","author":{"id":"7ad4pa","name":"Palpys","avatar":"1629142763139__7ad4pa__w40px_h40px.jpg","points":764,"role":"BASIC"},"creationTime":1716216561000,"updateTime":1716287311000,"removalTime":null},{"id":"pJZ7Vp","type":"html","name":"JavaScript - deselect input radio element on second click","content":"// ONLINE-RUNNER:browser;\n\n<label><input id=\"my-input-1\" type=\"radio\" name=\"my-field\" value=\"my-value-1\" /><span>Label 1</span></label>\n<label><input id=\"my-input-2\" type=\"radio\" name=\"my-field\" value=\"my-value-2\" /><span>Label 2</span></label>\n<label><input id=\"my-input-3\" type=\"radio\" name=\"my-field\" value=\"my-value-3\" /><span>Label 3</span></label>\n<script>\n\n    function findTarget(input) {\n        const labels = input.labels;\n        if (labels && labels.length > 0) {\n            return labels[0];\n        }\n        return input;\n    }\n  \n    function addOnBeforeClick(input, callback) {\n        const target = findTarget(input);\n        let pointer = false;  // mouse and touch gestures\n        target.addEventListener('mousedown', function(e) {\n            if (e.button === 0) {  // mouse primary button test (works also when user touches screen)\n                pointer = true;\n            }\n        });\n        target.addEventListener('mouseup', function(e) {\n            if (pointer) {\n                callback(e);\n            }\n        });\n        window.addEventListener('mouseup', function(e) {\n            pointer = false;\n        });\n        if (input.type === 'radio' || input.type === 'checkbox') {\n            let key = false;  // key gestures (when input is focused space selects/deselects checkbox/radio button)\n            target.addEventListener('keydown', function(e) {\n                if (e.code === 'Space') {\n                    key = true;\n                }\n            });\n            target.addEventListener('keyup', function(e) {\n                if (key) {\n                    callback(e);\n                }\n            });\n            window.addEventListener('keyup', function(e) {\n                key = false;\n            });\n        }\n    }\n\n    function configureDeselection(input) {\n        if (input.type === 'radio') {\n            let checked = false;\n            addOnBeforeClick(input, function() {\n                checked = input.checked;\n            });\n            input.addEventListener('click', function() {\n                input.checked = !checked;\n            });\n        }\n    }\n\n\n    // Usage example:\n\n    const element1 = document.querySelector('#my-input-1');\n    const element2 = document.querySelector('#my-input-2');\n    const element3 = document.querySelector('#my-input-3');\n\n    configureDeselection(element1);\n    configureDeselection(element2);\n    configureDeselection(element3);\n\n</script>","source":"","author":{"id":"505AB0","name":"nickkk0","avatar":"1629141765522__505AB0__w40px_h40px.jpg","points":647,"role":"BASIC"},"creationTime":1716287009000,"updateTime":1716287303000,"removalTime":null}]}}]};