Question

如果我选中多个复选框，我想打印所有在复选框中打勾的值。但是，它只打印我检查的第一个值。 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>

Answer 2

您的功能应如下所示

function check_skills(){

    var selected_skills = $('.chk:checked');

    if (selected_skills.length > 0)
    {
        $("#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;
    }
}

每次调用函数时，都使用选择器:checked和.chk类来获取所有选中的复选框。

Answer 3

我已经找到问题的答案。事实证明，我需要在每个复选框的名称中添加[]。因此，当我在技能上添加[]时，它会打印复选框中的所有选中值。顺便说一句，感谢所有帮助过我的人。

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

    [skills] => Array
    (
        [0] => Web Development
        [1] => Business Intelligence/Analytics
        [2] => Networking
    )

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

3 个答案: