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

标签 javascript php jquery

如果我选中了 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;
      }
  }

最佳答案

使用 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>

关于javascript - 如何打印所有选中的复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55683459/

相关文章:

javascript - 迭代列表元素 - jQuery

javascript - 如何仅拦截顶级标签的 mouseout 事件

javascript - 将 HTML 控件从一个页面移动到另一页面

javascript - 使用 Ajax 将 JavaScript 数组发送到 PHP 返回 Null

javascript - 如何禁用 1 个按钮但保持其他按钮启用

javascript - 如何从日期选择器中获取单独变量中的日期月份和日期

javascript - 使用正则表达式在字符之间提取数据?

c# - PHP、Javascript 或 C# 中的微分或无限集成?

Javascript 增加输入结果并包含逗号

jquery - [quicksearch] 如何确定显示的行数?