How to get the value of selected checkbox in jquery and assign it to a json array?

Question

I have a problem, I have little understanding about jquery that's why I am having a hard time with my code. I have a pagination of products. And there are checkboxes on it. And my simple goal is to disable the products if the checkboxes are selected. But I can't do it in one form because I have already another process in my form which is delete products if selected. That's why I am planning to create a form action in my jquery and pass all the product id from my checkbox to a json array. But how can I do that?

Here's a bit of my code

<form action="<?php echo $delete; ?>" method="post" enctype="multipart/form-data" id="form">
  <table class="list">
    <thead>
      <tr>
        <td width="1" style="text-align: center;"><input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" /></td>
        <td class="left"><?php echo $column_name; ?></td>
        <td class="right"><?php echo $column_sort_order; ?></td>
        <td class="left"><?php echo $column_status; ?></td>
        <td class="right"><?php echo $column_action; ?></td>
      </tr>
    </thead>
    <tbody>
      <?php if ($categories) { ?>
      <?php foreach ($categories as $category) { ?>
      <tr>
        <td style="text-align: center;"><?php if ($category['selected']) { ?>
          <input type="checkbox" name="selected[]" value="<?php echo $category['category_id']; ?>" checked="checked" />
          <?php } else { ?>
          <input type="checkbox" name="selected[]" value="<?php echo $category['category_id']; ?>" />
          <?php } ?></td>
        <td class="left"><?php echo $category['name']; ?></td>
        <td class="right"><?php echo $category['sort_order']; ?></td>
        <td class="right"><?php echo ($category['status'] == 1 ? 'Enable' : 'Disable'); ?></td>
        <td class="right"><?php foreach ($category['action'] as $action) { ?>
          [ <a href="<?php echo $action['href']; ?>"><?php echo $action['text']; ?></a> ]
          <?php } ?></td>
      </tr>
      <?php } ?>
      <?php } else { ?>
      <tr>
        <td class="center" colspan="4"><?php echo $text_no_results; ?></td>
      </tr>
      <?php } ?>
    </tbody>
  </table>
</form>

<br />
<div align="right">
  <select name="action_select">
    <option value="enable">Enable Selected</option>
    <option value="disable">Disable Selected</option>
  </select>
  <input type="button" class="button" id="update_status" value="Update Status" />
</div>
<br />

Here's my jquery sample

<script type="text/javascript">

    $("#update_status").on('click', function(){

        //how can I get the id of my checkboxes and assign it to a json array
        //How can I create a form inside it?

    });

</script>

That's all guys I hope you can understand my question. Thanks.

You can get all checked checkboxes in jQuery with `$('checkbox:checked')`. Since your checkboxes are already inside of a form, you could also do `$('form').serializeArray()` and iterate through what is and isn't checked. But I'm not sure what you mean by "assign it to a json array" do you mean just `arr = [];` then `$('checkbox:checked').each(function(){arr.push(this.id)});` then `JSON.stringify(arr)`? — Adam Merrifield, Apr 28 '14 at 05:08
You could also go for a "Google Mail" (the web UI) approach with one checkbox at the beginning of the row and multiple actions to choose from at the top/bottom for those selected. — christian314159, Apr 28 '14 at 05:19

score 2 · Accepted Answer · edited Jul 23 '21 at 04:13

Otherwise you can use the below example code

<script>
    $(document).ready(function()
    {
            $("input[type=checkbox]").click(function()
            {
                    var categoryVals = [];
                    categoryVals.push('');
                    $('#Category_category :checked').each(function() {
                  categoryVals.push($(this).val());
                });
                $.ajax({
                    type:"POST",
                    url:"<?php echo $this->createUrl('ads/searchresult'); ?>", //url of the action page
                    data:{'category': categoryVals},
                    success : function(response){
                       //code to do somethng if its success
                    } 
                    });
            }
    }
    </script>

score 1 · Answer 2 · edited May 23 '17 at 12:19

1

try

$('input[name="selected[]"]:checked').each(function() {
   console.log(this.value);
});

for more info :- use jQuery to get values of selected checkboxes

edited May 23 '17 at 12:19

Community

1
1

answered Apr 28 '14 at 05:08

Rakesh Sharma

13,680
5
37
44

You need to add `[]` after `selected` – Adam Merrifield Apr 28 '14 at 05:10

score 0 · Answer 3 · answered Apr 28 '14 at 05:09

0

Try

var values = $('.list input[name="selected[]"]:checked').map(function () {
    return this.value;
}).get();

answered Apr 28 '14 at 05:09

Arun P Johny

384,651
66
527
531

How to get the value of selected checkbox in jquery and assign it to a json array?

3 Answers3