Question

假设我有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。有办法解决吗？谢谢！

Answer 1

在下面查看我的解决方案。

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>

Answer 2

按钮的类型无效。请更改type="button"。您可以使用Jquery#filter，Jquery#map和.get() API

并且.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>

Answer 3

使用按钮的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>

Answer 4

这是我的解决方法：

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE hibernate-mapping PUBLIC
        "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
        "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
    <class name="com.wjh.blog.domain.Article" table="article" >
        <id name="article_id" column="article_id">
            <generator class="native"/>
        </id>
        <property name="article_title" column="article_title"/>
        <property name="article_content" column="article_content"/>
        <property name="article_time" column="article_time"/>
        <property name="article_pic" column="article_pic"/>
        <property name="article_desc" column="article_desc"/>
        <!--category-->
        <many-to-one name="article_category" class="com.wjh.blog.domain.Category"
                     column="article_category_id" cascade="save-update,persist" ></many-to-one>

    </class>
</hibernate-mapping>

function select()
{
   var results=$("input:checkbox:checked");
   for (i=0;i< results.length;i++)
   {
     alert(results[i].id);
   }
}

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

4 个答案: