Buttons to select checkboxes by name

Question

I have the following checkboxes in an HTML form.

<ul id="selection">
  <span><label>First<br><input type="checkbox" name="First"></label></span>
  <span><label>Second<br><input type="checkbox" name="Second"></label></span>
  <span><label>Third<br><input type="checkbox" name="Third"></label></span>
  <span><label>Fourth<br><input type="checkbox" name="Fourth"></label></span>
  <span><label>Fifth<br><input type="checkbox" name="Fifth"></label></span>
</ul>

I'm trying to create two buttons. One that would select the first two and one that would select all of them.
I managed to select all of them with one button using this:

<input type="button" class="check btn" onClick="select(this)" value="Select All"/>
    <script>
      $('.check:button').click(function(){
          var checked = !$(this).data('checked');
          $('input:checkbox').prop('checked', checked);
          $(this).val(checked ? 'uncheck all' : 'Select' )
          $(this).data('checked', checked);
      });
    </script>

But I can't seem to get the two buttons working.
My JavaScript knowledge is pretty limited and been searching for days, unsuccessfully for a solution that works.
Can please someone help? a detailed explanation would be awesome.

http://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery — Gopinath Shiva, Aug 01 '16 at 11:25

score 1 · Accepted Answer · answered Aug 01 '16 at 11:38

Try this:

$("#selectall").click(function() {
  $("input[type='checkbox']").prop('checked', true);
});
$("#selecttwo").click(function() {
  $("input[name='First'], input[name='Second']").prop('checked', true);
});
$("#resetall").click(function() {
  $("input[type='checkbox']").prop('checked', false);
});

DEMO

score 0 · Answer 2 · answered Aug 01 '16 at 11:30

Are you looking for this, https://jsfiddle.net/wx38rz5L/1261/ ( sorry about css :P ) or https://jsfiddle.net/wx38rz5L/1262/

Reference: https://api.jquery.com/attribute-equals-selector/

$('input[name=First]').prop('checked',true);
$('input[name=Second]').prop('checked',true);

//$('input[name=First],input[name=Second]').prop('checked',true); in one line

Buttons to select checkboxes by name

2 Answers2