I have a created a function to alert the user all the values they have checked from the checkboxes. For example if the user selects '1' and '2' then it should alert '1, 2' or if the user select '1' and '3' it should alert 1, 3 etc. However, it is not working. Any help would be appreciated :)

<form>
  <input class="1" type="checkbox" name="1" value="1" onclick="add()">1
  <input class="2" type="checkbox" name="2" value="2" onclick="add()">2
  <input class="3" type="checkbox" name="3" value="3" onclick="add()">3
  <input class="4" type="checkbox" name="4" value="4" onclick="add()">4
</form>

Here is a jsfiddle.

I have a created a function to alert the user all the values they have checked from the checkboxes. For example if the user selects '1' and '2' then it should alert '1, 2' or if the user select '1' and '3' it should alert 1, 3 etc. However, it is not working. Any help would be appreciated :)

<form>
  <input class="1" type="checkbox" name="1" value="1" onclick="add()">1
  <input class="2" type="checkbox" name="2" value="2" onclick="add()">2
  <input class="3" type="checkbox" name="3" value="3" onclick="add()">3
  <input class="4" type="checkbox" name="4" value="4" onclick="add()">4
</form>

Here is a jsfiddle.

• javascript
• jquery
• html

• You should probably add some javascript to a javascript-tagged question. I know it's in the Fiddle, but you need to also include it in your post. – Tim Lewis Commented Jun 5, 2015 at 16:19
• You're using an event listener inside a function that called on onClick. Or I'm missing here something or something went wrong? – Ofir Baruch Commented Jun 5, 2015 at 16:20
• Sorry, the JSfiddle shouldn't have the click function. – Ryan Hawdon Commented Jun 5, 2015 at 16:22

4 Answers 4

You could just do like below.

$(':checkbox').click(function() {
    alert($(':checkbox:checked').map(function() {
      return this.value;
    }).get());
});

The demo.

$('input:checkbox').on('change', function() {
    var chkd = $('input:checkbox:checked');
    if( chkd.length == 2 ) {
        var vals = chkd.map(function() {
            return this.value;
        })
        .get().join(', ');
        alert( vals );
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class="1" type="checkbox" name="1" value="1"/>1
  <input class="2" type="checkbox" name="2" value="2"/>2
  <input class="3" type="checkbox" name="3" value="3"/>3
  <input class="4" type="checkbox" name="4" value="4"/>4
</form>

UPDATE

$(function() {
    $('#myButton').on('click', function() {
        var text = $('input[name=somename]').val();
        var chkd = $('input:checkbox:checked');
        var vals = chkd.map(function() {
            return this.value;
         })
        .get().join(', ');
        alert("Name: " + text + "\n" + "Checkbox: " + vals );
    });
});

DEMO

function add() {
  var checked = '';
  $(':checked').each(function() {
    checked += $(this).val() + ',';
  });
  console.log(checked);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input class="1" type="checkbox" name="1" value="1" onclick="add()">1
<input class="2" type="checkbox" name="2" value="2" onclick="add()">2
<input class="3" type="checkbox" name="3" value="3" onclick="add()">3
<input class="4" type="checkbox" name="4" value="4" onclick="add()">4

One more way is this:

$("input[type='checkbox']").change(function() {
  $(':checked').each(function() {
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="footboard" type="checkbox" name="1" value="1">1
<input class="drawers" type="checkbox" name="2" value="2">2
<input class="casters" type="checkbox" name="3" value="3">3
<input class="squeak" type="checkbox" name="4" value="4">4