时间戳

首页 > 解决方案 > 如何将复选框 id 从 HTML 传递到 JQuery？

jquery - 如何将复选框 id 从 HTML 传递到 JQuery？

问题描述

我正在尝试编写一个 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");
        }
    });
});

标签： jqueryhtmlcheckbox

解决方案

您不需要像刚才那样传递一个 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>

推荐阅读