CODEWITHSUNDEEP
javascriptphpjquery
Roseanne
Roseanne

Reputation: 77

How to print all selected checkbox?

I want to print all values that I tick in the checkbox if I checked more than 1 checkbox. However, it only print the first value that I checked. If I checked more than 1 checkbox in this image It only printed one value from the checkbox Thanks in advance

 // 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;
      }
  }

Upvotes: 2

Views: 675

Answers (3)

Roseanne
Roseanne

Reputation: 77

I already found out the answer to my question. It turned that I need to add [] in name in every checkbox. So when I added [] to skills, it printed all the checked value from the checkbox. By the way, thanks for everyone who've helped me.

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

Upvotes: 0

Alex Andrei
Alex Andrei

Reputation: 7283

Your function should look like below

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

Using the selector :checked along with the .chk class to get all the checked check boxes every time the function is called.

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

Use the jQuery :checked selector

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

Upvotes: 1

Related Questions