代码之家  ›  专栏  ›  技术社区  ›  Pavel Zagalsky

获取选定的动态生成的复选框的ID

  •  1
  • Pavel Zagalsky  · 技术社区  · 6 年前

    假设我有x个复选框:

    <input type="checkbox" id="ams" value="False">
    <input type="checkbox" id="lon" value="False">
    <input type="checkbox" id="ber" value="False">
    <input type="checkbox" id="par" value="False">
    

    我想按下一个按钮:

    <button type="submit_cities" id="submit_cities">Print selected cities</button>
    

    打印选中复选框的ID。 有办法吗? 谢谢!

    3 回复  |  直到 6 年前
        1
  •  1
  •   The fourth bird    6 年前

    使用按钮的id添加clickhandler,然后循环选择输入:

    $("#submit_cities").click(function() {
      $('input:checked').each((_, elm) => console.log(elm.id));
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" id="ams" value="False">
    <input type="checkbox" id="lon" value="False">
    <input type="checkbox" id="ber" value="False">
    <input type="checkbox" id="par" value="False">
    <button type="submit_cities" id="submit_cities">Print selected cities</button>
        2
  •  2
  •   lankovova    6 年前

    看看下面我的解决方案。

    const checkboxes = [ ...document.querySelectorAll('input[type="checkbox"]') ]
    const submitButton = document.querySelector('#submit_cities')
    
    const getCheckedIDs = () => 
      checkboxes
        .filter(checkbox => checkbox.checked)
        .map(checkbox => checkbox.getAttribute('id'))
    
    submitButton.onclick = () => {
      console.log(getCheckedIDs())
    }
    <input type="checkbox" id="ams" value="False">
    <input type="checkbox" id="lon" value="False">
    <input type="checkbox" id="ber" value="False">
    <input type="checkbox" id="par" value="False">
    <button type="submit_cities" id="submit_cities">Print selected cities</button>
        3
  •  2
  •   prasanth    6 年前

    无效的按钮类型。请更改为 type="button" 你可以用 Jquery#filter , Jquery#map .get() 应用程序编程接口

    使用 .on() 专门用于动态附加的元素

    $(document).on('click', '#submit_cities', function() {
      var $arr = $('input[type="checkbox"]').filter((a, b) => $(b).is(':checked')).map((a, b) => $(b).attr('id')).get()
      console.log($arr)
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" id="ams" value="False">
    <input type="checkbox" id="lon" value="False">
    <input type="checkbox" id="ber" value="False">
    <input type="checkbox" id="par" value="False"> And I'd like upon pressing a button:
    
    <button type="button" id="submit_cities">Print selected cities</button>
        4
  •  0
  •   The KNVB    6 年前

    以下是我的解决方案:

    function select()
    {
       var results=$("input:checkbox:checked");
       for (i=0;i< results.length;i++)
       {
         alert(results[i].id);
       }
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" id="ams" value="False">
    <input type="checkbox" id="lon" value="False">
    <input type="checkbox" id="ber" value="False">
    <input type="checkbox" id="par" value="False">
    
    <button onclick="select()">
    Go
    </button>