how Function would look to enable several checkboxes from a Radio type

Asked

Viewed 63 times

-1

I would like to checkbox social networks, but only enable if the person clicks on the type="radio" "yes". how Function would look for this in javascript. 

    <label>Possui rede social: </label>
    <input type="radio" name ="social" onclick="habilitar" id="1" > Sim
    <input type="radio" name="social"                      id="2" > Nao <br><br>
    <label>Quais</label><br><br>
    <input type="checkbox" name="facebook"  disabled> facebook<br>
    <input type="checkbox" name="linkedin"  disabled> linkedin<br>
    <input type="checkbox" name="instagram" disabled> instagram<br>
javascript checkbox radiobutton

  • you have already seen the related questions here on the site, for example: https://answall.com/questions/292060/selectr-todos-checkbox-ao-clicar-em-um-checkbox ?

  • this way does not work, need only enable, not give automated checked.

  • In your "enable" function, Voce can remove the "disabled" attribute from input[checkbox]. Ex: element.removeAttribute("disabled");. More info here MDN - Removeattribute

2 answers

0

First you should change the radio button Ids: For Yes and No

<label>Possui rede social: </label>
<input type="radio" name ="social" 
id="Sim" > Sim
<input type="radio" name="social"                     id="Nao" > Nao <br><br>
<label>Quais</label><br><br>
<input type="checkbox" name="facebook"  disabled> facebook<br>
<input type="checkbox" name="linkedin"  disabled> linkedin<br>
<input type="checkbox" name="instagram" disabled> instagram<br>

JS

const redeS = document.querySelector("#Sim")
const redeN = document.querySelector("#Nao")
const checks = document.querySelectorAll('input[type=checkbox]')

redeS.addEventListener('click', () => {
  if(redeS.checked)
  {
    for(i = 0; i < checks.length; i++)
    {
      checks[i].removeAttribute("disabled")
    }
  }
})

redeN.addEventListener('click', () => {
  if(redeN.checked)
  {
    for(i = 0; i < checks.length; i++)
    {
      checks[i].setAttribute("disabled", "false")
    }
  }
})

0


Put values on each radio button. It will be useful if you submit to the server and useful to use in the script to differentiate one element from the other (no need to use id that is unnecessary for this):

<input type="radio" name ="social" value="sim"> Sim
<input type="radio" name="social" value="nao" checked> Nao

In the first place value="sim" and in the second value="nao".

Since checkboxes are already loaded disabled, it is interesting also add attribute checked in the "Nao" option, so that it is already marked.

It is good also to put a class in each checkbox so you can create a group and not confuse it with other checkboxes you may have on the page:

<input class="social" type="checkbox" name="facebook"  disabled> facebook<br>
<input class="social" type="checkbox" name="linkedin"  disabled> linkedin<br>
<input class="social" type="checkbox" name="instagram" disabled> instagram<br>

With this, just create an event onchange for each radio button and change the checkbox according to the value of the radio changed:

const radios = document.querySelectorAll("[name='social']");
const social = document.querySelectorAll(".social");

for(let i of radios){
   i.onchange = function(){
      for(let x of social){
         x.disabled = i.value == "sim" ? false : true;
      }
   }
}
<label>Possui rede social: </label>
<input type="radio" name ="social" value="sim"> Sim
<input type="radio" name="social" value="nao" checked> Nao <br><br>
<label>Quais</label><br><br>
<input class="social" type="checkbox" name="facebook"  disabled> facebook<br>
<input class="social" type="checkbox" name="linkedin"  disabled> linkedin<br>
<input class="social" type="checkbox" name="instagram" disabled> instagram<br>

  • mt thanks manooo, vlw helped mt here, I’m starting in this area of programming and was in doubt on how to do the script

Browser other questions tagged javascript checkbox radiobutton

You are not signed in. Login or sign up in order to post.