Jquery - How to make an output in the respective element when you click through array?

BeAlwaysMine
December 18, 2023
256 views
2 votes
3 Answers

I want to make Active if the Countries I check is Inactive. But I didnt know how, here’s my code.

PS: I use mobile phone for now, so that Snippet is not avail. For those who extract my code through Snippet is much appreciated.

This is the example, because the only problem is how to make any function if you click the respective element or div. Like for example, if I check the checkbox in 2nd div, there’s something happen in 2nd div only. Then if I didn’t check the others div, it nothing happens or affected.

const Countries = ["Philippines", "New York", "Singapore"];

function createList() {
  const liTag = $('.Handler');
  for (let i = 0; i < Countries.length; i++) {
    const List = `
      <ul id="CountryList">
       <li>
          <div class="NameOfCountry">
            <input type="checkbox" class="Check">
            <p class="CountryName">Hello</p>
            <p class="InActive">Inactive</p>
          </div>
        </li>
      </ul>   
    `;
    
    var elem = $(List);
    elem.find('.CountryName').html(Countries[i]);
    elem.find('.Check').change(function() {
      //Create a code that if the checkbox is Check, the word inactive makes Active on Respective Element. 
    })
    liTag.append(elem);
  }
}
createList();

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

body {
  background: #40fff5;
}

.Handler {
  width: 100%;
  padding: 12px;
}

ul li {
  list-style: none;
}

.NameOfCountry {
  background: blue;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  align-items: center;
  padding: 8px;
  margin-top: 6px;
}

.CountryName {
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.InActive {
  background: white;
  border-radius: 5px;
  color: red;
  font-size: 11px;
  font-weight: bold;
  width: 30%;
  padding: 5px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Handler"></div>

Answers

I added a few things
Added the status class to your

tag
added a few things to your .change function to toggle between ‘Active’ and ‘Inactive’ and change the background color based on the checkbox state.

const Countries = ["Philippines", "New York", "Singapore"];

function createList() {
  const liTag = $('.Handler');
  for (let i = 0; i < Countries.length; i++) {
    const List = `
          <ul id="CountryList">
            <li>
              <div class="NameOfCountry">
                <input type="checkbox" class="Check">
                <p class="CountryName">${Countries[i]}</p>
                <p class="Status Inactive">Inactive</p>
              </div>
            </li>
          </ul>
        `;

    var elem = $(List);
    elem.find('.Check').change(function() {
      const statusElem = $(this).closest('.NameOfCountry').find('.Status');
      statusElem.text($(this).prop('checked') ? 'Active' : 'Inactive');
      statusElem.toggleClass('Active Inactive');
    });
    liTag.append(elem);
  }
}

createList();

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

body {
  background: #40fff5;
}

.Handler {
  width: 100%;
  padding: 12px;
}

ul li {
  list-style: none;
}

.NameOfCountry {
  background: blue;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  align-items: center;
  padding: 8px;
  margin-top: 6px;
}

.CountryName {
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.Active {
  background: green;
  border-radius: 5px;
  color: white;
  font-size: 11px;
  font-weight: bold;
  width: 30%;
  padding: 5px;
  text-align: center;
}

.Inactive {
  background: white;
  border-radius: 5px;
  color: red;
  font-size: 11px;
  font-weight: bold;
  width: 30%;
  padding: 5px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Handler"></div>

If I’ve understood your question correctly, your goal is to toggle the ‘InActive’ text to ‘Active’ based on the state of the checkbox within any given row.

To do this, you can use a single delegated event handler which accepts an Event object as an argument. You can determine which checkbox triggered the event from that Event and traverse the DOM to update its related p element.

Below is a working example. Note that I added some classes to the content to make identifying elements easier, and I also moved the HTML out of the JS in to the HTML to maintain a good Separation of Concerns.

const createList = ($container, countryList) => {
  const countryHtmlTemplate = $('#country-list-item-template').html();

  countryList.forEach(country => {
    let listItem = countryHtmlTemplate.replace('{{Name}}', country);
    $countryContainer.append(listItem);
  });
  
  $container.on('change', ':checkbox', e => {
    $(e.target).closest('li').find('.state').text((i, t) => e.target.checked ? 'Active' : 'InActive');
  });
}

const $countryContainer = $('.handler');
const countries = ["Philippines", "New York", "Singapore"];
createList($countryContainer, countries);

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

body {
  background: #40fff5;
}

.Handler {
  width: 100%;
  padding: 12px;
}

ul li {
  list-style: none;
}

.NameOfCountry {
  background: blue;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  align-items: center;
  padding: 8px;
  margin-top: 6px;
}

.CountryName {
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.InActive {
  background: white;
  border-radius: 5px;
  color: red;
  font-size: 11px;
  font-weight: bold;
  width: 30%;
  padding: 5px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="handler"></div>

<template id="country-list-item-template">
  <ul id="CountryList">
    <li>
      <div class="NameOfCountry">
        <input type="checkbox" class="Check">
        <p class="CountryName">{{Name}}</p>
        <p class="state InActive">Inactive</p>
      </div>
    </li>
  </ul> 
</template>

const Countries = ["Philippines", "New York", "Singapore"];

function createList() {
  const liTag = $('.Handler');
  for (let i = 0; i < Countries.length; i++) {
    const List = `
      <ul id="CountryList">
       <li>
          <div class="NameOfCountry">
            <input type="checkbox" class="Check">
            <p class="CountryName">Hello</p>
            <p class="InActive">Inactive</p>
          </div>
        </li>
      </ul>   
    `;
    
    var elem = $(List);
    elem.find('.CountryName').html(Countries[i]);
    liTag.append(elem);
  }
}
createList();

document.querySelectorAll('.Check').forEach(check => {
  check.addEventListener('change', ({ target }) => {
    const { parentNode, checked } = target
    const inActiveElement = parentNode.querySelector('.InActive')
    inActiveElement.innerText = checked ? 'Active' : 'Inactive'
  })
})

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

body {
  background: #40fff5;
}

.Handler {
  width: 100%;
  padding: 12px;
}

ul li {
  list-style: none;
}

.NameOfCountry {
  background: blue;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  align-items: center;
  padding: 8px;
  margin-top: 6px;
}

.CountryName {
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.InActive {
  background: white;
  border-radius: 5px;
  color: red;
  font-size: 11px;
  font-weight: bold;
  width: 30%;
  padding: 5px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Handler"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How to make an output in the respective element when you click through array?

Answers