Home/ Questions/Q 6871341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:47:38+00:00

I am having 3 radio buttons approved and rejected and 4 text fields and

  • 0

I am having 3 radio buttons approved and rejected and 4 text fields and text boxes..

If i am clicking r1, all the text field and text boxes should be hided. but if i am clicking r2 and r3 the text field and text box should be displayed..

This is the code which i have used

if(approved.checked == true) {

  reason.style.visibility="hidden";

  Reason.style.visibility="hidden";
  sanction.style.visibility="display";
  sanctioned.style.visibility="display";
}

if(rejected.checked == true) {
    reason.disabled =false;
  reason.style.display="none";
  Reason.style.display="none";
  sanction.style.visibility="hidden";
  sanctioned.style.visibility="hidden";
}

This code is working for the first time when i click those radio buttons. But if am clicking rejected and then clicking approved it is not working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t mix the display and visibility properties, use one or the other. Valid values for the display property are: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

    Valid values for visibility are: visible | hidden | collapse | inherit

    The short answer: use visible instead of display.

    So your code can be (assuming the variables are references to suitable DOM elements):

    if(approved.checked) {
  reason.disabled = true;   // keep symetry with next loop
  reason.style.visibility = "hidden";
  Reason.style.visibility = "hidden";
  sanction.style.visibility = "visible";
  sanctioned.style.visibility = "visible";
}

if(rejected.checked) {
  reason.disabled = false;
  reason.style.visibility = "hidden";
  Reason.style.visibility  = "hidden";
  sanction.style.visibility = "hidden";
  sanctioned.style.visibility = "hidden";
}

    Note that it is simpler to hide the form controls by putting them inside another element (say a div) and hiding that. But why not just disable them? Hiding and showing them might annoy, distract or just plain confuse users.

    • 0