Question

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

Answer 1

您不需要像现在一样传递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>

Answer 2

您应该使用on()而不是单击作为事件处理程序，这会使此过程变得更加简单。您可以使用attr()-method获取（并设置）HTML属性的值（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
})

如何将复选框ID从HTML传递到JQuery？

2 个答案: