Jquery從單擊事件的下拉串列中選中選擇框

我對 jquery 有點陌生所以很抱歉問。

我正在使用資料表，并使用以下代碼創建了一個引導程式下拉串列。

          { '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>' } },

我想要的是在用戶單擊 href="#">Search</a>鏈接并將其發布到 php 檔案時獲取復選框。我正在嘗試獲取已檢查的屬性并測驗以下腳本中的帖子。但是即使選中，帖子也是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>

這是檢查所有內容后的發布結果。應該都是1。當用戶只選擇幾個時，只有那些需要是1。

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

我究竟做錯了什么？

編輯：嘗試了 Kinglish 的答案。但得到一個錯誤。Uncaught ReferenceError: selected is not defined我不明白，它說選擇未定義。當我使用data: {selected: data}, });它時，但是我在我的帖子中得到了以下結果。這是正確的嗎？

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

當用戶使用搜索鏈接時，嘗試從輸入框中獲取鍵入的值以及選定的框。但它不會出現..有什么問題，誰能解釋一下？

 $(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; });

uj5u.com熱心網友回復：

這是一個簡化。只需收集檢查的值并將其發送給 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/[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 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>

標籤：查询 数据表

上一篇：為什么正則運算式函式不能使用多個值？

下一篇：如何獲取上一個ul的id