javascript - Appending Checkbox Value jQuery - Stack Overflow

admin管理员组

文章数量:1026989

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

Share Improve this question Follow asked Jun 5, 2015 at 16:16 Ryan HawdonRyan Hawdon 38922 gold badges66 silver badges1515 bronze badges 3

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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

Share Improve this question Follow asked Jun 5, 2015 at 16:16 Ryan HawdonRyan Hawdon 38922 gold badges66 silver badges1515 bronze badges 3

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

本文标签： javascriptAppending Checkbox Value jQueryStack Overflow