Question 258158 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to combine multiple functions that do the same thing?

I am working on building an app, and I have about twelve checkboxes with svgs that appear next to the checkbox when that particular checkbox is checked by the user. Example checkbox below:

<input type="checkbox" id="stdyCoord" name="resPos1" value="2" class="optnsArea2">

<label for="stdyCoord">
  <object data='images/icons/White_SVG/checkmark2-svg.svg'
         class='img-responsive titleSVG' 
         type="image/svg+xml" 
         style='display: none' id='svgStdyCoord'>
  </object>
  Study Coordinator
</label>

I have this working pretty seamlessly with the below JS function:

$('#stdyCoord').click(function (event) {

    $('#svgStdyCoord').toggle();

  });

Is there a way to avoid having to write out 12 functions that are the same for each different checkbox? I tried to use if/else statements but couldn’t get it to work.

Tags:

2

Answers


  1. 0

    A couple of things.
    I moved the checkbox inside the label. That way you don’t need an id for the checkbox or a "for" for the label.
    I gave the checkbox a class of hasSVG so that we know which ones to give the click handler.

    The click function itself just gets the next element after the one that was clicked. So for the hasSVG checkboxes, that’s the object you want to toggle.

    $('.hasSVG').click(function (event) {
    $(this).next().toggle();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type="checkbox" name="resPos1" value="2" class="optnsArea2 hasSVG">
  <object data='images/icons/White_SVG/checkmark2-svg.svg'
         class='img-responsive titleSVG' 
         type="image/svg+xml" 
         style='display: none'>
  </object>
  Study Coordinator
</label>

<label>
  <input type="checkbox" name="resPos1" value="3" class="optnsArea2 hasSVG">
  <object data='images/icons/White_SVG/checkmark2-svg.svg'
         class='img-responsive titleSVG' 
         type="image/svg+xml" 
         style='display: none'>
  </object>
  Space Commander
</label>
    Login or Signup to reply.
  2. 0

    Write your own native JavaScript Web Component <marked-checkbox>,
    Supported in all modern browsers.

    drawback of jQuery is code can only operate on existing DOM nodes.

    Web Components automagically upgrade, you can define a Web Component any time you want.

    <marked-checkbox value="1"></marked-checkbox>
<marked-checkbox value="2"></marked-checkbox>
<marked-checkbox value="3" checked></marked-checkbox>

<script>
  customElements.define("marked-checkbox", class extends HTMLElement {
    connectedCallback() {
      let value = this.getAttribute("value");
      this.innerHTML =
        `<label>` +
          value +
          `<input type="checkbox" value="${value}">` +
          `<span>checked!</span><br>` +
        `</label>`;
      this.input   = this.querySelector("input");
      this.span    = this.querySelector("span");
      this.checked = this.hasAttribute("checked");
      this.input.onclick = (evt) => {
        this.checked = this.span.hidden;
      }
    }
    set checked(state){
      this.span.hidden = !state;
      this.input.checked = state;
    }
  })
</script>

<marked-checkbox value="4" checked></marked-checkbox>
<marked-checkbox value="5"></marked-checkbox>
<marked-checkbox value="6"></marked-checkbox>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search