Getting values of multiple checkboxes and inserting them into MySQL

Question

I have tried to look on SO for a solution similar to mine and I couldn't find anything.

I have 4 checkboxes on my website

<label class="control-label" for="last_name"><strong>Filtering Options</strong> </label>
<div style='color: #777; font-size: 16px;'><td  class='text-center'> <input type='checkbox' name="filters" id='city_checkbox' class='checkbox filters' $lstr_completed_city value="location_city"/> </td> City </div>
<div style='color: #777; font-size: 16px;'><td  class='text-center'> <input type='checkbox' name="filters" id='county_checkbox' class='checkbox filters' $lstr_completed_county value="location_zip"/> </td> County </div>
<div style='color: #777; font-size: 16px;'><td  class='text-center'> <input type='checkbox' name="filters" id='region_checkbox' class='checkbox filters' $lstr_completed_region value="location_region"/> </td> Region </div>
<div style='color: #777; font-size: 16px;'><td  class='text-center'> <input type='checkbox' name="filters" id='country_checkbox' class='checkbox filters' $lstr_completed_country value="location_country"/>   </td> Country</div>

What I want to do is whenever ANY of them is clicked, I want to cycle through all of them, seem which ones are checked, get their values and update the MySQL based on the selections. I'm pretty sure I will be fine with the PHP/MySQL part but I am struggling with the jQuery to get the values.

Lets take this as an example. Checkbox 1 and 3 are selected, 2 and 4 are not. I only want to post the values of checkbox 1 and 3. Then if checkbox 2 is added to the selection, I want to post values of checkbox 1, 2 and 3.

This is what I have tried so far. It reacts when I click on any checkbox but I'm just unsure as to how I go about getting specific values.

$('.filters').on('ifClicked', function(event)
    {
        var temp_id         =   event.target.id;
        current_cb_element  =   temp_id;
        var chckValue = $('#' + current_cb_element).parent('[class*="icheckbox"]').hasClass("checked");
        if (chckValue)
            chckValue = 0;
        else
            chckValue = 1;

        $("input[name=filters]").each( function () {

            alert( chckValue );
   });

which plugin are you using? I may assume icheck, but I'm not sure. Please add more info — gaetanoM
– gaetanoM, Commented Sep 13, 2018 at 11:35

Uttam Gupta · Accepted Answer · 2018-09-13 12:57:59Z

1

use below code

$('input[type="checkbox"]').click(function () {
                var arrayCheck = new Array();
                $('input[type="checkbox"]').each(function (i) {
                    if ($(this).prop('checked') == true) {
                        arrayCheck.push(i + 1);
                    }

                });
            });

edited Sep 13, 2018 at 12:57

answered Sep 13, 2018 at 12:20

Uttam Gupta

5182 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

artlemaks Over a year ago

I tried to use your code but this is what I get when I check the array link and I'm not sure what does values correspond to?

Uttam Gupta Over a year ago

i have updated the code, please try now and no. refers the index plus 1 of checkbox, say if first checkbox is check link arrayCheck[0]:1

artlemaks Over a year ago

Ok so two questions. 1. Is there a way to put a value into the array, rather than just a number? 2. I have more than just those 4 checkboxes on the page. Can I change input[type="checkbox"] to input[name="xyz"]?

Uttam Gupta Over a year ago

1. Pushing values to an array is a standard way, u can use string i.e (concatenate string) 2. this code will work for all the checkboxes on the page and you can also use input[name="xyz"]

artlemaks Over a year ago

Got you. Almost working but I am having one more issue. The data seems to be one click behind. Please see this link for array associated with each checkbox setting. As you can see, the first checkbox click doesn't input anything into an array. Why is that the case?

|

Kathak Dabhi · Accepted Answer · 2018-09-13 11:45:04Z

0

Check for the checked attribute on the checkbox and if found read the value.

$("input[name=filters]").each(function() {
                if($(this).attr('checked')){
            console.log($(this).val());
        }
      });

answered Sep 13, 2018 at 11:45

Kathak Dabhi

3893 silver badges17 bronze badges

1 Comment

artlemaks Over a year ago

There is no reaction in console when I use this code and press the checkboxes

A.T. · Accepted Answer · 2018-09-13 11:46:34Z

0

if you have option for jQuery, then why not. Just take the parent, find all targets to attach some event, and reiterate values in that event.

$(function(){
  $("#checkboxes [type='checkbox']").change(function(ev){
      console.clear()
      $("#checkboxes [type='checkbox']:checked").map((index, cb)=> {
            console.log(cb.value)
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<input type='checkbox' name="filters" id='city_checkbox' class='checkbox filters' $lstr_completed_city value="location_city"/>
 <input type='checkbox' name="filters" id='county_checkbox' class='checkbox filters' $lstr_completed_county value="location_zip"/>
 <input type='checkbox' name="filters" id='region_checkbox' class='checkbox filters' $lstr_completed_region value="location_region"/>
 <input type='checkbox' name="filters" id='country_checkbox' class='checkbox filters' $lstr_completed_country value="location_country"/>
</div>

answered Sep 13, 2018 at 11:46

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

1 Comment

artlemaks Over a year ago

This is the closest I got to a working answer. I replaced the first line as it wouldn't work for me and got

$('.filters').on('ifClicked', function(event) 	{ 		$("#checkboxes [type='checkbox']:checked").map((index, cb)=> {             console.log(cb.value)       });    });

Which updates the data but the selection always seems to be one click behind. So I need to click 2 boxes at least before getting a return

Collectives™ on Stack Overflow

Getting values of multiple checkboxes and inserting them into MySQL

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related