如何正确添加else语句处理未勾选任何复选框的场景

Hey there! The problem with putting the else inside the for loop is that it runs every time it hits an unchecked checkbox—so if you have 4 checkboxes all unselected, you'll get 4 alerts! Not ideal, right?

Instead, we should check if we've collected any selected values after the loop finishes. Here's how to adjust your code properly:

Updated JavaScript Code #

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#get-sport-check-box-values').addEventListener('click', getOfffered_Service);

  function getOfffered_Service() {
    var chks = document.querySelectorAll(".form input[name='sport']");
    var text = new Array();
    var strtext = '';

    // Loop through all checkboxes to collect selected values
    for (var i = 0; i < chks.length; i++) {
      if (chks[i].checked) {
        text.push(chks[i].value); // Using push() is cleaner than manually setting index
      }
    }

    // Check if we have any selected values
    if (text.length === 0) {
      alert('please select one or more check boxes');
    } else {
      strtext = text.join(' and ');
      alert('I love ' + strtext);
    }
  }
});

Key Changes Explained #

• Removed the else from inside the loop—we don't care about individual unchecked boxes, only if none are checked overall.
• Used text.push(chks[i].value) instead of text[arlength] = ...—it's a more standard and readable way to add items to an array.
• Added a check for text.length === 0 after the loop: if the array is empty, show the warning alert. Otherwise, proceed to build and show the "I love..." message.

Full Working Code (HTML + CSS Included) #

HTML

<h3>What sports do you like?</h3>
<div class='form'>
  <input type='checkbox' name='sport' value='basketball'>
  <p class='sport-check-value-label'>Basketball</p><br>
  <input type='checkbox' name='sport' value='baseball'>
  <p class='sport-check-value-label'>Baseball</p><br>
  <input type='checkbox' name='sport' value='football'>
  <p class='sport-check-value-label'>Football</p><br>
  <input type='checkbox' name='sport' value='mma'>
  <p class='sport-check-value-label'>MMA</p>
  <button id='get-sport-check-box-values'>Get</button>
</div>

CSS

.sport-check-value-label {
  display: inline;
}

#get-sport-check-box-values {
  display: block;
  margin-top: 20px;
}

Now when you click "Get" without selecting any checkboxes, you'll only see one warning alert. And when you select some sports, you'll get the nice "I love X and Y" message as before!

内容的提问来源于stack exchange，提问作者user9767744