Jquery get checked select boxes from dropdown on click event-CodePudding

I am a bit new to jquery so sorry for asking.

I am using datatables and I created a bootstrap dropdown with the folowing code.

          { 'data': null, title: '', wrap: true, "render": function (item) { return '<div ><button  type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i ></i><span ></span></button><ul  aria-labelledby="dropdownMenu1"><li role="presentation" >Detectives</li><input type="text"  id="exampleInputPassword1" placeholder="Accountname"><li ><label><input type="checkbox" > United States</label></li><li ><label><input type="checkbox" > Netherlands</label></li><li ><label><input type="checkbox" > Italy</label></li><li ><label><input type="checkbox" > China</label></li><li ><label><input type="checkbox" > Great Britain</label></li><li role="presentation" ></li><li role="presentation"><a role="menuitem" tabindex="-1"  href="#">Search</a></li></ul></div>' } },

What I want is to get the checked boxes when the user clicks the href="#">Search</a> link and post it to a php file. I am trying to get the checked property and testing the post in the folowing script. But the post is 0 even when checked.

<script>
$("#accountTable").on("change", "input[type='checkbox']",".checkbox-menu", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

$("#accountTable").on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});
</script>



<script>
    $(document).ready(function () {
        $("#accountTable").on("click", ".searchtarget", function () { // notice the on function

            
            var SearchUSA = $(this).closest("li","input[type='checkbox']", ".usa").is(':checked') ? 1 : 0;
            var SearchNL = $(this).closest("li","input[type='checkbox']", ".netherlands").is(':checked') ? 1 : 0;
            var SearchItaly = $(this).closest("li","input[type='checkbox']", ".italy").is(':checked') ? 1 : 0;
            var SearchChina = $(this).closest("li","input[type='checkbox']", ".china").is(':checked') ? 1 : 0;
            var SearchGB = $(this).closest("li","input[type='checkbox']", ".gb").is(':checked') ? 1 : 0;


            $.ajax({
                type: "POST",
                url: "testchecked.php",
                data: {
                    USA: SearchUSA,
                    NL: SearchNL,
                    Italy: SearchItaly,
                    China: SearchChina,
                    GB: SearchGB
                },

            });
            return true;
        });

    });
</script>

This is the post result when all is checked. It should all be 1. our when a user only selects a few only those need to be 1.

USA: 0
NL: 0
Italy: 0
China: 0
GB: 0

What am I doing wrong?

CodePudding user response：

Here's a simplification. Just gather the checked values and send that off to the PHP. You can take that array and use it for the search. This line loop through the relevant checkboxes to get the values of the checked ones

$(this).closest('ul').find('input[type=checkbox]:checked')
     .map(function() { return this.value; }).get();

$(document).ready(function() {
  $("#accountTable").on("click", ".searchtarget", function() {
    let data = {
      selected: $(this).closest('ul').find('input[type=checkbox]:checked').map(function() {
        return this.value;
      }).get()
    }
    console.log(data)
  })
})

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<table id='accountTable'>
  <tr>
    <td>
      <div ><button  type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Choose <i ></i><span ></span></button>
        <ul  aria-labelledby="dropdownMenu1">
          <li><label><input type="checkbox" value="usa"> United States</label></li>
          <li><label><input type="checkbox" value="netherlands"> Netherlands</label></li>
          <li><label><input type="checkbox" value="italy"> Italy</label></li>
          <li><label><input type="checkbox" value="china"> China</label></li>
          <li><label><input type="checkbox" value="gb"> Great Britain</label></li>
          <li role="presentation" ></li>
          <li role="presentation"><a role="menuitem" tabindex="-1"  href="#">Search</a></li>
        </ul>
      </div>
    </td>
  </tr>
</table>