Check checked items and apply logic

Asked

Viewed 41 times

0

Good morning, I’m studying javascript and I came across a problem: I created a logic where I provide two buttons, one to free access that when clicked is on the screen only the check icon, and the block that when clicked is only the blocked icon. The problem is that the icons of the checked items can be changed, but even with both checked items the only one that changes the icon is the first one. I’m changing the icon letting your display "None" and "initial" I did this way because I don’t know any other way, if you know something with javascript thank you, but the question is how do I change the icon happen in all checked items and not just in the first ? Thank you.

JS:

    function bloquearAcesso(){
    let inputs = document.querySelectorAll(".checar");

    for(let i = 0; i< inputs.length; i++){
        if(inputs[i].checked == true){

          document.getElementById("liberado").style.display = "none";
          document.getElementById("bloqueado").style.display = "initial";
      }
  };

    };

  function liberarAcesso(){
    let inputs = document.querySelectorAll(".checar");

        for(let i = 0; i < inputs.length; i++){
      if (inputs[i].checked == true){
      document.getElementById("bloqueado").style.display = "none";
      document.getElementById("liberado").style.display = "initial";
      };
  };
  }

HTML:

<html>    
<body>
<div class="box-body no-padding">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Patio</th>
              <th>Acessar Desktop</th>
              <th>Criado em</th>

            </tr>
          </thead>
          <tbody>

            <tr>
              <td><input class="checar" type="checkbox">Patio1</td>
              <td> <i id="liberado" class="fa fa-check"></i> &nbsp; <i id="bloqueado" class="far fa-times-circle"></i></td>
              <td>02/04/2018</td>
              <td>

              </td>
            </tr>

            <tr>
                    <td><input class="checar" type="checkbox">Patio2</td>
                    <td> <i id="liberado" class="fa fa-check"></i> &nbsp; <i id="bloqueado" class="far fa-times-circle"></i></td>
                    <td>02/04/2018</td>
                  </tr>


                  <br/>


          </tbody>


        </table>
        <button onclick="liberarAcesso()" type="button" class="btn btn-primary btn-xs btn-flat">Liberar acesso</button>
        <button onclick="bloquearAcesso()" type="button" class="btn btn-danger btn-xs btn-flat">Bloquear acesso</button>


      </div>

      <script src="./curso.js">
      </script>
</body>
</html>
javascript checkbox

  • You cannot repeat id’s. Set the id "released" as a class. The same with the id "locked".

  • In case I would use getElementByClassName ? I tried here and gave: It is not possible to set the Display property of Undefined. as there are two classes in the icon, I tried by name and gave the same error

  • Can use document.getElementByClassName("liberado") or document.querySelectorAll(".liberado")... then you have to make a loop to catch the element by the index. The set of elements of the same class is an array. To catch the first, for example, you would: document.getElementByClassName("liberado")[0]

  • Sam, I got it, man, but now when none is checked it doesn’t happen anything, all right, but when only one is checked it changes the icon of all

  • I got brother, I put to check if the input was checked at each loop of the goes and it worked, Thanks for the help!

3 answers

0

I managed, but it generated another problem, when none is selected it works correctly, but when I select only one it applies the logic to all.

function bloquearAcesso(){
    let inputs = document.querySelectorAll("#form1 [name=checar]");
    let liberado = document.querySelectorAll("#form1 [name=liberado]");
    let bloqueado =  document.querySelectorAll("#form1 [name=bloqueado]");

    for(let i = 0; i< inputs.length; i++){
        if(inputs[i].checked == true){



           for (var x = 0; x < liberado.length; x++){
    liberado[x].style.display = 'none';
    };
                for (var x = 0; x < bloqueado.length; x++){
                    bloqueado[x].style.display = 'initial';
                        };

    };
      }
  };

  function liberarAcesso(){
    let inputs = document.querySelectorAll("#form1 [name=checar]");
    let liberado = document.querySelectorAll("#form1 [name=liberado]");
    let bloqueado =  document.querySelectorAll("#form1 [name=bloqueado]");
    for(let i = 0; i < inputs.length; i++){
        if (inputs[i].checked == true){   

            for (var x=0; x <bloqueado.length; x++){
                bloqueado[x].style.display = 'none';
            };


                for (var x = 0; x < liberado.length; x++){
                    liberado[x].style.display = "initial";
                };
            };



  };
}

0


As stated in the comments, repeating id’s is wrong and will always get the first element with id. Turn id’s into class and use document.querySelectorAll taking the elements by their respective index:

function bloquearAcesso(){
   let inputs = document.querySelectorAll(".checar");

   for(let i = 0; i < inputs.length; i++){
      if(inputs[i].checked){
          document.querySelectorAll(".liberado")[i].style.display = "none";
          document.querySelectorAll(".bloqueado")[i].style.display = "initial";
      }
   }

}

function liberarAcesso(){
   let inputs = document.querySelectorAll(".checar");

   for(let i = 0; i < inputs.length; i++){
      if (inputs[i].checked){
         document.querySelectorAll(".bloqueado")[i].style.display = "none";
         document.querySelectorAll(".liberado")[i].style.display = "initial";
      }
   }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="box-body no-padding">
   <table class="table table-striped">
      <thead>
         <tr>
            <th>Patio</th>
            <th>Acessar Desktop</th>
            <th>Criado em</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td><input class="checar" type="checkbox">Patio1</td>
            <td><i class="fa fa-check liberado"></i> &nbsp; <i class="far fa-times-circle bloqueado"></i></td>
            <td>02/04/2018</td>
            <td>
            </td>
         </tr>
         <tr>
            <td><input class="checar" type="checkbox">Patio2</td>
            <td><i class="fa fa-check liberado"></i> &nbsp; <i class="far fa-times-circle bloqueado"></i></td>
            <td>02/04/2018</td>
         </tr>
      </tbody>
   </table>
   <button onclick="liberarAcesso()" type="button" class="btn btn-primary btn-xs btn-flat">Liberar acesso</button>
   <button onclick="bloquearAcesso()" type="button" class="btn btn-danger btn-xs btn-flat">Bloquear acesso</button>
</div>

  • Thanks even brother, solved already. Hug.

0

Solved! I first put a for to scan the checked inputs, inside this for have two more Fors, one to put the None display and the other in the initial state, inside each for there is one more check to ensure that the logic will be applied only to the checked inputs. Follow the code in case someone has this problem.

function bloquearAcesso(){
    let inputs = document.querySelectorAll("#form1 [name=checar]");
    let liberado = document.querySelectorAll("#form1 [name=liberado]");
    let bloqueado =  document.querySelectorAll("#form1 [name=bloqueado]");
    for(let i = 0; i< inputs.length; i++){
        if(inputs[i].checked == true){



           for (var x = 0; x < liberado.length; x++){
            let teste = " ";
            if(inputs[x].checked == true){

                teste = liberado[x].style.display = 'none';
    };
};
                for (var x = 0; x < bloqueado.length; x++){
                    if(inputs[x].checked == true){

                    let test = " ";

                    test = bloqueado[x].style.display = 'initial';
                        };

    };
};


      }

  };

  function liberarAcesso(){
    let inputs = document.querySelectorAll("#form1 [name=checar]");
    let liberado = document.querySelectorAll("#form1 [name=liberado]");
    let bloqueado =  document.querySelectorAll("#form1 [name=bloqueado]");
    for(let i = 0; i < inputs.length; i++){
        if (inputs[i].checked == true){   

            for (var x=0; x <bloqueado.length; x++){
                if(inputs[x].checked == true){


                bloqueado[x].style.display = 'none';
            };

        };    
                for (var x = 0; x < liberado.length; x++){
                    if(inputs[x].checked == true){

                    liberado[x].style.display = "initial";
                };
            };



  };
}
}

Browser other questions tagged javascript checkbox

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