javascript - 如何打印所有选中的复选框？

Question

如果我选中了 1 个以上的复选框，我想打印我在复选框中勾选的所有值。但是，它只打印我检查的第一个值。 If I checked more than 1 checkbox in this image It only printed one value from the checkbox提前致谢

 // HTML code    
<strong>IT Skills:&emsp;</strong><br><br>
<div class="checkboxlist"  id="skills">
  <input type="checkbox" name="skills" value="Programming/Application Development" class="chk">&nbsp;Programming/Application Development&emsp;
  <input type="checkbox" name="skills" value="Project Management" class="chk">&nbsp;Project Management&emsp;<br>
  <input type="checkbox" name="skills" value="Helpdesk/Technical Support" class="chk">&nbsp;Helpdesk/ Technical Support&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;
  <input type="checkbox" name="skills" value="Security/Compliance Governance" class="chk">&nbsp;Security/ Compliance Governance&emsp;<br>
  <input type="checkbox" name="skills" value="Web Development" class="chk">&nbsp;Web Development&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="skills" value="Database Administration" class="chk">&nbsp;Database Administration&emsp;<br>
  <input type="checkbox" name="skills" value="Business Intelligence/Analytics" class="chk">&nbsp;Business Intelligence/ Analytics&emsp;&emsp;&emsp;&emsp;&nbsp;
  <input type="checkbox" name="skills" value="Mobile Applications and Device Management" class="chk">&nbsp;Mobile Applications and Device Management&emsp;<br>
  <input type="checkbox" name="skills" value="Networking" class="chk">&nbsp;Networking&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;
  <input type="checkbox" name="skills" value="Big Data" class="chk">&nbsp;Big Data&emsp;<br>
</div>
<span class="error_form" id="skills_error_message"></span>

 //jQuery code
 function check_skills(){
    var skill = [];
    if (skills == 'checked') {
       $("#skills_error_message").hide();
       $("#skills").css("border-bottom","2px solid #34F458");
     } else {
       $("#skills_error_message").html("Please select a skill!");
       $("#skills_error_message").show();
       $("#skills").css("border-bottom","2px solid #F90A0A");
       error_skills = true;
      }
  }

Answer 1

使用 jQuery :checked 选择器

//jQuery code
function check_skills() {
  var favorite = [];
  $.each($("input[name='skills']:checked"), function() {
    favorite.push($(this).val());
  });
  console.log(favorite)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>IT Skills:&emsp;</strong><br><br>
<div class="checkboxlist" id="skills">
  <input type="checkbox" name="skills" value="Programming/Application Development" class="chk">&nbsp;Programming/Application Development&emsp;
  <input type="checkbox" name="skills" value="Project Management" class="chk">&nbsp;Project Management&emsp;<br>
  <input type="checkbox" name="skills" value="Helpdesk/Technical Support" class="chk">&nbsp;Helpdesk/ Technical Support&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;
  <input type="checkbox" name="skills" value="Security/Compliance Governance" class="chk">&nbsp;Security/ Compliance Governance&emsp;<br>
  <input type="checkbox" name="skills" value="Web Development" class="chk">&nbsp;Web Development&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="skills" value="Database Administration" class="chk">&nbsp;Database Administration&emsp;<br>
  <input type="checkbox" name="skills" value="Business Intelligence/Analytics" class="chk">&nbsp;Business Intelligence/ Analytics&emsp;&emsp;&emsp;&emsp;&nbsp;
  <input type="checkbox" name="skills" value="Mobile Applications and Device Management" class="chk">&nbsp;Mobile Applications and Device Management&emsp;<br>
  <input type="checkbox" name="skills" value="Networking" class="chk">&nbsp;Networking&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;
  <input type="checkbox" name="skills" value="Big Data" class="chk">&nbsp;Big Data&emsp;<br>
</div>
<span class="error_form" id="skills_error_message"></span>
<button onclick="check_skills()">
Check
</button>