如何将复选框 id 从 HTML 传递到 JQuery？答案

【问题标题】：How to pass a checkbox id from HTML to JQuery?如何将复选框 id 从 HTML 传递到 JQuery？
【发布时间】：2018-08-06 09:54:46
【问题描述】：

我正在尝试编写一个 Jquery 函数，将任何选定的复选框从一个 div 移动到另一个。但是，我不确定如何将每个复选框的页面 ID 从 HTML 模板代码传递给 JQuery。有没有人有任何想法？

<fieldset>   
    <h3>Pages</h3>
    <div class="fieldset_elements">
        <div id="pagecontainer">
            <div class="selectpagebox" id="pagebox1">
                <h4>Available Pages</h4>
                    {foreach from=$pagelist item=page}
                         <div class="pageSelection">
                             <input type="checkbox" id="{$page.id}"
                                    value="{$page.id}"
                                    {if $page.id eq $selectedPage}
                                    selected="true"
                                    {/if}" />
                             {$page.page_name}
                         </div>
                    {/foreach}
            </div>
            <div class="selectpagebox" id="pagebox2">
                <h4>Selected Pages</h4>
                {foreach from=$selectedPage item=page}
                    <span id="page" class="pageSelection"> 
                        <option value="{$page.id}"
                            {if $page.id eq $selectedPage}
                                selected="true"
                            {/if}">
                          {$page.page_name}
                        </option>
                    </span>
                {/foreach}
            </div>
        </div>
    </div>
</fieldset>

$(function () {
    // Check if user clicks on the checkbox
    $('#' + id).click(function() {

        if($('#' + id).is(":checked")){

            $("#pagebox1").contents().appendTo("#pagebox2");
        } else {

            $("#pagebox2").contents().appendTo("#pagebox1");
        }
    });
});

【问题讨论】：

您可以使用this 关键字来引用点击处理程序中的元素：if ($(this).is(":checked"))... 或更简单的：if (this.checked)...
这对于 $('#' + id).click(function().. 是否相同？即 $(this).click(function() {...？
否，因为它没有所需的范围。

标签： jquery html checkbox

【解决方案1】：

您应该使用 on() 而不是 click 作为事件处理程序，这将使这更简单。您可以使用attr()-method 获取（和设置）值 HTML-attributes（id 也是属性）。在您的示例中，您将获得 id="{$page.id}" 的值：

$('.pagecontainer input[type=checkbox]').on('click', function() {
    var pageId = $(this).attr('id'); //pageId now contains the id

    // ... your code with small adjustments
})

【讨论】：

【解决方案2】：

您不需要像刚才那样传递 id..

您可以使用$("#pagebox1 > input[type='checkbox']") 将所有输入元素作为一个元素来定位

完整代码

$("#pagebox1 > input[type='checkbox']").on("click", function(){
    if($(this).is(":checked")){
    //checked
  }
})

var elements = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6"];

$.each(elements, function(idx, item){
	$("#pagebox1").append(`<input type='checkbox' id='Test_${idx}'>${item}</input>`);
});


//	Start of answer

$("#pagebox1 > input[type='checkbox']").on("click", function(){
	if($(this).is(":checked")){
  	alert("Checked");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectpagebox" id="pagebox1">

</div>

【讨论】：