Add class based on checked checkbox [closed]

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
4
down vote

favorite












I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.



Simple checkbox in html relates to adding underline to some text:



$("#houseOrCar").on("change", function () 
if ($(this).is(":checked") )
$("#houseChosen").css("text-decoration", "none");
$("#carChosen").css("text-decoration", "underline");

else
$("#houseChosen").css("text-decoration", "underline");
$("#carChosen").css("text-decoration", "none");
;
);






share|improve this question











closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53


This question appears to be off-topic. The users who voted to close gave this specific reason:


  • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
If this question can be reworded to fit the rules in the help center, please edit the question.


















    up vote
    4
    down vote

    favorite












    I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.



    Simple checkbox in html relates to adding underline to some text:



    $("#houseOrCar").on("change", function () 
    if ($(this).is(":checked") )
    $("#houseChosen").css("text-decoration", "none");
    $("#carChosen").css("text-decoration", "underline");

    else
    $("#houseChosen").css("text-decoration", "underline");
    $("#carChosen").css("text-decoration", "none");
    ;
    );






    share|improve this question











    closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53


    This question appears to be off-topic. The users who voted to close gave this specific reason:


    • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
    If this question can be reworded to fit the rules in the help center, please edit the question.














      up vote
      4
      down vote

      favorite









      up vote
      4
      down vote

      favorite











      I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.



      Simple checkbox in html relates to adding underline to some text:



      $("#houseOrCar").on("change", function () 
      if ($(this).is(":checked") )
      $("#houseChosen").css("text-decoration", "none");
      $("#carChosen").css("text-decoration", "underline");

      else
      $("#houseChosen").css("text-decoration", "underline");
      $("#carChosen").css("text-decoration", "none");
      ;
      );






      share|improve this question











      I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.



      Simple checkbox in html relates to adding underline to some text:



      $("#houseOrCar").on("change", function () 
      if ($(this).is(":checked") )
      $("#houseChosen").css("text-decoration", "none");
      $("#carChosen").css("text-decoration", "underline");

      else
      $("#houseChosen").css("text-decoration", "underline");
      $("#carChosen").css("text-decoration", "none");
      ;
      );








      share|improve this question










      share|improve this question




      share|improve this question









      asked Jun 22 at 11:13









      user007

      232




      232




      closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53


      This question appears to be off-topic. The users who voted to close gave this specific reason:


      • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
      If this question can be reworded to fit the rules in the help center, please edit the question.




      closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53


      This question appears to be off-topic. The users who voted to close gave this specific reason:


      • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
      If this question can be reworded to fit the rules in the help center, please edit the question.




















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          4
          down vote



          accepted










          You could use a class that would only hold the property for the active element, in our case text-decoration: underline;. Then simply toggle each of the two labels to set on and off this "active" class (here called underline).
          So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline on page load.



          Plain JavaScript






          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          Note I'm using the .forEach method of the nodeList class:




          The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.





          jQuery



          And here it is implemented with jQuery, which is shorter but very similar:






          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!






          share|improve this answer























          • You're welcome!
            – Ivan
            Jun 22 at 12:22

















          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          4
          down vote



          accepted










          You could use a class that would only hold the property for the active element, in our case text-decoration: underline;. Then simply toggle each of the two labels to set on and off this "active" class (here called underline).
          So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline on page load.



          Plain JavaScript






          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          Note I'm using the .forEach method of the nodeList class:




          The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.





          jQuery



          And here it is implemented with jQuery, which is shorter but very similar:






          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!






          share|improve this answer























          • You're welcome!
            – Ivan
            Jun 22 at 12:22














          up vote
          4
          down vote



          accepted










          You could use a class that would only hold the property for the active element, in our case text-decoration: underline;. Then simply toggle each of the two labels to set on and off this "active" class (here called underline).
          So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline on page load.



          Plain JavaScript






          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          Note I'm using the .forEach method of the nodeList class:




          The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.





          jQuery



          And here it is implemented with jQuery, which is shorter but very similar:






          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!






          share|improve this answer























          • You're welcome!
            – Ivan
            Jun 22 at 12:22












          up vote
          4
          down vote



          accepted







          up vote
          4
          down vote



          accepted






          You could use a class that would only hold the property for the active element, in our case text-decoration: underline;. Then simply toggle each of the two labels to set on and off this "active" class (here called underline).
          So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline on page load.



          Plain JavaScript






          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          Note I'm using the .forEach method of the nodeList class:




          The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.





          jQuery



          And here it is implemented with jQuery, which is shorter but very similar:






          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!






          share|improve this answer















          You could use a class that would only hold the property for the active element, in our case text-decoration: underline;. Then simply toggle each of the two labels to set on and off this "active" class (here called underline).
          So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline on page load.



          Plain JavaScript






          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          Note I'm using the .forEach method of the nodeList class:




          The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.





          jQuery



          And here it is implemented with jQuery, which is shorter but very similar:






          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!






          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          const toggle = () => document.querySelectorAll('#labels > div')
          .forEach(label => label.classList.toggle('underline'))

          document.querySelector('#houseOrCar').addEventListener('change', toggle);

          .underline 
          text-decoration: underline;

          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>





          const toggle = () => $('#labels > div')
          .each((i,e) => $(e).toggleClass('underline'));

          $('#houseOrCar').on('change', toggle);

          .underline 
          text-decoration: underline;

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id="houseOrCar">

          <div id="labels">
          <div class="underline">HOUSE</div>
          <div>CAR</div>
          </div>






          share|improve this answer















          share|improve this answer



          share|improve this answer








          edited Jun 22 at 11:55


























          answered Jun 22 at 11:44









          Ivan

          33511




          33511











          • You're welcome!
            – Ivan
            Jun 22 at 12:22
















          • You're welcome!
            – Ivan
            Jun 22 at 12:22















          You're welcome!
          – Ivan
          Jun 22 at 12:22




          You're welcome!
          – Ivan
          Jun 22 at 12:22


          Popular posts from this blog

          Greedy Best First Search implementation in Rust

          Function to Return a JSON Like Objects Using VBA Collections and Arrays

          C++11 CLH Lock Implementation