Question

0

79

Views

Get checked checkboxes trigger event on sibling elements

I have these buttons and want to click the selected ones at one time

<div class="form-group">
  <input type="checkbox">
  <label><button onclick="alert('a')">button1</button></label>
</div>
<div class="form-group">
  <input type="checkbox">
  <label><button onclick="alert('b')">button2</button></label>
</div>
<div class="form-group">
  <input type="checkbox">
  <label><button onclick="alert('c')">button3</button></label>
</div>
<button>go</button>

I tried some jquery stuff but not made it

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Instead of just giving you some code:

You're not assigning any click to your GO button (Why?)
Add an ID to your GO button to help you query it in JS
Assign a class to your checkboxes as well. Like: class="chk"
Don't use unsafe inline on* handlers. JS should be in one place only, and that's its respective tag or file. Use addEventListener instead
Makes no sense to use <button> inside <label> since it will steal the focus.
Your checkboxes are missing the value attribute. Use that attribute to store the desired value.
You're missing for attributes. Either add id to your INPUTs and for to your labels, or just wrap everything inside the LABEL
You're missing type="button" on your buttons
Avoid the use of prompt, alert. Replace those with a proper UI. For testing purpose use console

// DOM utility functions:

const EL = (sel, par) => (par || document).querySelector(sel);
const ELS = (sel, par) => (par || document).querySelectorAll(sel);

// Task:

const doSomething = (EL_chk) => {
  // Do something...
  console.log(EL_chk.value);
};

// Add change events to each checkbox
ELS(".chk").forEach((EL_chk) => {
   EL_chk.addEventListener("input", () => doSomething(EL_chk));
});

// On button GO click, target the checked ones
EL("#go").addEventListener("click", () => {
  ELS(".chk:checked").forEach(doSomething);
});

.btn {
  display: inline-block;
  background: #eee;
  padding: 0.3rem 0.5rem;
  border-radius: 0.2rem;
  border: 0;
}

<div class="form-group">
  <label>
    <input class="chk" type="checkbox" value="a">
    <!-- DON'T USE <button> INSIDE A LABEL -->
    <span class="btn">button A</span>
  </label>
</div>

<div class="form-group">
  <label>
    <input class="chk" type="checkbox" value="b">
    <span class="btn" data-click="a">button B</span>
  </label>
</div>

<div class="form-group">
  <label>
    <input class="chk" type="checkbox" value="c">
    <span class="btn">button C</span>
  </label>
</div>

<button id="go" class="btn" type="button">GO</button>

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T05:05:32.278Z

Try this. In JS we are selected button with checkbox status checked and then triggering click event.

function go() {
  document.querySelectorAll('input[type="checkbox"]:checked ~ label > button').forEach(function(element){
    element.click();
  })
}

<div class="form-group">
   <input type="checkbox" >
   <label ><button onclick="alert('a')">button1</button></label>
</div>
<div class="form-group">
   <input type="checkbox" >
   <label ><button onclick="alert('b')">button2</button></label>
</div>
<div class="form-group">
   <input type="checkbox" >
   <label ><button onclick="alert('c')">button3</button></label>
</div>
<br>
<button onclick="go()">go</button>

0

79

Get checked checkboxes trigger event on sibling elements

2 answers

0

0

Find remote jobs

Andres GPT