CODEWITHSUNDEEP
javascripthtml
Maurice van der Leeden
Maurice van der Leeden

Reputation: 13

Determine radio button not selected anymore

I wrote a javascript function that change the style of a div (here a TR tag) when I select a radio button in form (called by onchange event).

function handleCheck(myRadio) {
    var vak = 'vak' + myRadio.name + 'x' + myRadio.value;
    var col = document.getElementById(vak);
    col.style.backgroundColor = "black"; 
    col.style.color = "white"; 
}

However, often when you select option X another option is deselected while you can select only one value at the time in the same. This option is not triggered by the onchange event. Is there a way to determine that a radio button is not checked any more?

Upvotes: 1

Views: 50

Answers (3)

dfsq
dfsq

Reputation: 193311

You will have to clear previously assigned classes. Take a look at this example:

function handleCheck(myRadio) {
    clear(myRadio.className);
    var vak = 'vak' + myRadio.name + 'x' + myRadio.value;
    var col = document.getElementById(vak);
    col.className += ' selected'; 
}

function clear(className) {
    var tr = document.querySelectorAll('tr.vak' + className);
    for (var i = 0; i < tr.length; i++) {
        tr[i].className = 'vak' + className;
    }
}

Demo: http://jsfiddle.net/abh7guv5/

Upvotes: 0

Sam Braslavskiy
Sam Braslavskiy

Reputation: 1288

well, if I understand you correctly, you have a function that applies some styles whenever you check a radio button, but you also would like to remove styles from elements, that corresponds to already unchecked buttons. If yes, you can store your previous checked item in a variable, then you might want something like: 

var previousElement = null;
function handleCheck(myRadio) {
   var vak = 'vak' + myRadio.name + 'x' + myRadio.value;
   var col = document.getElementById(vak);
   col.style.backgroundColor = "black"; 
   col.style.color = "white";

   if(previousElement!==null&&previousElement!==col){
       previousElement.style.color = ""; // or whatever you want
   }
   previousElement = col;
}

Upvotes: 0

daxur
daxur

Reputation: 359

If I understood correctly what you are trying to achieve, simply read document.getElementById("myRadio").checked - it will be true or false

Upvotes: 0

Related Questions