मैंने एक HTML फ़ाइल में आइटम्स की एक सूची एक साथ रखी है और हर बार जब मैं सूची में किसी आइटम की जांच करता हूं तो मैं इसे दिखाना चाहता हूं जहां यह कहता है "फ़िल्टर यहां प्रदर्शित होगा" बटन के रूप में "मैंने एक कंसोल चलाया है। लॉग ओवर जेएस कोड और यह कहता है: "आइटम चेक नहीं किया गया।"

const headerTag = document.querySelector('.header-tag');
const list = document.querySelectorAll('.checkbox li')

const listItems = [...list];

for(let i = 0; i < listItems.length; i++) {
      if(listItems.checked === true) {
        console.log('item checked');
      } else {
        console.log('item not checked');
      }
}
.header-tag {
    display: contents;
}
</head>
<body>
  <div class="header-tag">
    <p class="header-tag">Filter will display here</p>
  <ul class="checkbox">
    <li> 
        <input type="checkbox" name="item1" class="item-list">Natural Systems
    </li>
    <li> 
        <input type="checkbox" name="item1" class="item-list">Sustainability Integration 
    </li>
    <li> 
        <input type="checkbox" name="item1" class="item-list">Social Systems
    </li>
  </ul>
</body>

<script src='script.js'></script>
</html>
0
WeeklyButterfly34 3 जून 2021, 06:00

3 जवाब

सबसे बढ़िया उत्तर

यहां, हम एक ईवेंट श्रोता सेट करते हैं जब DOM लोड होता है (window.onload) और हर बार एक चेकबॉक्स पर क्लिक करने पर, हम सभी चेक किए गए बॉक्स का जायजा लेते हैं, प्रदर्शन के लिए उनके parentNode.innerText को पकड़ लेते हैं। मुझे बाहरी कंटेनर div के लिए आपके पास क्लासनाम भी बदलना पड़ा (इसमें टैग के समान वर्ग था जहां आप चेक किए गए आइटम प्रदर्शित करना चाहते थे)।

const headerTag = document.querySelector('.header-tag');
const list = document.querySelectorAll('.checkbox li')


window.onload = function() {
  let cb = document.querySelectorAll('input[type="checkbox"]');
  for (let x = 0; x < cb.length; x++) {
    cb[x].addEventListener('change', onCBChange)
  }
}

const onCBChange = (event) => {
  let l = [];
  let ck = document.querySelectorAll('input[type="checkbox"]:checked');
  for (let x = 0; x < ck.length; x++) {
    l.push(ck[x].parentNode.innerText)
  }
  headerTag.innerHTML = l.join(", ");
}
.header-tag {
  display: contents;
}
</head>

<body>
  <div class="header-tag-container">
    <p class="header-tag">Filter will display here</p>
    <ul class="checkbox">
      <li>
        <input type="checkbox" name="item1" class="item-list">Natural Systems
      </li>
      <li>
        <input type="checkbox" name="item1" class="item-list">Sustainability Integration
      </li>
      <li>
        <input type="checkbox" name="item1" class="item-list">Social Systems
      </li>
    </ul>
</body>

<script src='script.js'></script>

</html>
1
Kinglish 3 जून 2021, 06:33

आपकी अगर स्थिति गलत है।

  1. लूप में आप वस्तुओं का काउंटर नहीं बदल रहे हैं।
  2. साथ ही, चेकबॉक्स ली का बाल नियंत्रण है।

तो, आपकी अगर स्थिति इस तरह होनी चाहिए

if(listItems[i].children[0].checked === true) {
            console.log('item checked');
          } else {
            console.log('item not checked');
          }
0
Amit Verma 3 जून 2021, 06:20

दूसरे तरीके से, आप event.target का उपयोग कर सकते हैं और nextSibling.nodeValue प्राप्त कर सकते हैं। सशर्त का उपयोग यह देखने के लिए करें कि क्या e.target.checked && arr.includes(e.target.nextSibling.nodeValue) तो हम एक सरणी में धक्का देते हैं। अनुक्रमणिका और ब्याह index = arr.indexOf(e.target.nextSibling.nodeValue) का उपयोग करके अचयनित आइटम निकालने की दूसरी शर्त। प्रदर्शित करने के लिए हमने displayEl.textContent = arr.join('- ') सेट किया है

const headerTag = document.querySelector('p.header-tag');
const list = document.querySelectorAll('.checkbox li input')
const arr = []

function getSelected(e) {
  if (e.target.checked && !arr.includes(e.target.nextSibling.nodeValue)) {
    arr.push(e.target.nextSibling.nodeValue)
  }
  if (!e.target.checked) {
    arr.indexOf(e.target.nextSibling.nodeValue) > -1 ?
      arr.splice(arr.indexOf(e.target.nextSibling.nodeValue), 1):null
  }
  return headerTag.textContent = arr.join('- ')
}

list.forEach(item => {
  item.addEventListener('change', getSelected)
})
.header-tag {
  display: contents;
}
</head>

<body>
  <div class="header-tag">
    <p class="header-tag">Filter will display here</p>
    <ul class="checkbox">
      <li>
        <input type="checkbox" name="item1" class="item-list">Natural Systems
      </li>
      <li>
        <input type="checkbox" name="item1" class="item-list">Sustainability Integration
      </li>
      <li>
        <input type="checkbox" name="item1" class="item-list">Social Systems
      </li>
    </ul>
</body>

<script src='script.js'></script>

</html>
0
dale landry 3 जून 2021, 07:51