Jquery 在单击事件时从下拉列表中选中 select 个框

Question

我对 jquery 有点陌生，很抱歉提问。

我正在使用数据表并使用以下代码创建了一个 bootstrap 下拉列表。

          { 'data': null, title: '', wrap: true, "render": function (item) { return '<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-cog"></i><span class="caret"></span></button><ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">Detectives</li><input type="text" class="form-control" id="exampleInputPassword1" placeholder="Accountname"><li ><label><input type="checkbox" class="usa"> United States</label></li><li ><label><input type="checkbox" class="netherlands"> Netherlands</label></li><li ><label><input type="checkbox" class="Italy"> Italy</label></li><li ><label><input type="checkbox" class="china"> China</label></li><li ><label><input type="checkbox" class="gb"> Great Britain</label></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" class="searchtarget" href="#">Search</a></li></ul></div>' } },

我想要的是当用户单击 class="searchtarget" href="#">Search</a> link 和 post 时将复选框获取到 php 文件。我正在尝试获取已检查的属性并在以下脚本中测试 post 。但是 post 即使选中也是 0。

<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>

这是post全部勾选后的结果。它应该都是 1。当用户只选择几个时，我们只需要 1。

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

我做错了什么？

编辑：尝试了 Kinglish 的答案。但是得到一个错误。 Uncaught ReferenceError: selected is not defined 我不明白，它说未定义所选内容。当我使用 data: {selected: data}, }); 时，它是但随后我在 post 中得到以下结果。这样对吗？

selected[selected][]: netherlands
selected[selected][]: Italy

<script>
    $(document).ready(function () {
        $("#accountTable").on("click", ".searchtarget", function () { // notice the on function
            $(this).closest('ul').find('input[type=checkbox]:checked')
     .map(function() { return this.value; }).get();
           
     let data = {
      selected: $(this).closest('ul').find('input[type=checkbox]:checked').map(function() {
        return this.value;
          
      }).get()
      
    }
  
    $.ajax({ type: "POST", url: "testchecked.php", data: {selected: selected}, }); return true; });

    });
</script>

编辑 2

尝试在用户使用搜索时从输入框中获取键入的值以及选定的框link。但是它不会显示.. 怎么了，谁能解释一下？

 $(this).closest('ul').find('input[type=text]').map(function() { return this.val; }).get();     
     let dataname = {
        findtarget: $(this).closest('ul').find('input[type=text]').map(function() {
        return this.val;   
      }).get()
      
    }
var findtarget =  $(this).closest('ul').find('input[type=text]').val();
    $.ajax({ type: "POST", url: "testchecked.php", data: data,dataname,findtarget:findtarget }); return true; });

Answer 1

这里有一个简化。只需收集检查的值并将其发送到 PHP。您可以获取该数组并将其用于搜索。这一行循环遍历相关的复选框以获取选中的值

$(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/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<table id='accountTable'>
  <tr>
    <td>
      <div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Choose <i class="glyphicon glyphicon-cog"></i><span class="caret"></span></button>
        <ul class="dropdown-menu checkbox-menu allow-focus" 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" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" class="searchtarget" href="#">Search</a></li>
        </ul>
      </div>
    </td>
  </tr>
</table>

Jquery 在单击事件时从下拉列表中选中 select 个框

Jquery get checked select boxes from dropdown on click event

jquery

datatables