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

I am attempting to write a Jquery function that moves any selected checkboxes from one div to another. However, I'm not sure how to pass the page id for each checkbox from the HTML template code to JQuery. Does anyone have any ideas?

我正在尝试编写一个Jquery函数，将任何选中的复选框从一个div移动到另一个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");
        }
    });
});

2 个解决方案

#1

You should use an on() instead of click as an event handler, this will make this a lot simpler. You can get (and set) the value HTML-attributes (id’s are also attributes) with the attr()-method. In your example you would get the value of id="{$page.id}" with:

您应该使用on（）而不是click作为事件处理程序，这将使这更简单。您可以使用attr（）方法获取（并设置）值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
})

#2

You don't need to pass an id like you're doing just now..

你不需要传递像你刚才那样的id。

You can target all the input elements as a one using $("#pagebox1 > input[type='checkbox']")

您可以使用$（“＃pagebox1> input [type ='checkbox']”）将所有输入元素定位为一个

Full code

完整代码

$("#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>

#1

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

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

#2