Home/ Questions/Q 6355681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T22:48:53+00:00

I want to have 3 checkboxes, lets call them checkbox1, checkbox2, and checkbox3. <form

  • 0

I want to have 3 checkboxes, lets call them checkbox1, checkbox2, and checkbox3.

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
<div id="endingpoint"></div>
</form>

I set them up so that when a checkbox is checked, it uses appendTo to relocate them from “starting point” to “ending point”. It is working fine. Problem is, I want them to stay in chronological order (the order they started in).

SO…if I checked “checkbox3” and then “checkbox1”, I want the result to be this:

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
</form>

BUT…with the way appendTo works, I get this (note that “checkbox3” is above “checkbox1”)

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
</div>
</form>

How can I keep them in chronological order, specifically the order that they started in. Perhaps appendTo isn’t the solution?

ADDED IN RESPONSE TO COMMENT:

<script type="text/javascript">
$(function(){
$('#test input').attr('checked', false);
$('#test input').click(function(){
    if (this.checked) {
        $(this).closest('div').hide().appendTo("#endingpoint").fadeIn(1000)
    }
    else {
        $(this).closest('div').hide().appendTo("#startingpoint").fadeIn(1000)
    }
});
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A simple solution would be to have three empty divs as children of endpoint, use IDs or another attribute to identify them. When a checkbox is selected, the html of the corresponding div in endpoint is set to the checkbox html.

    Update (Response to comment):

    You can setup your code so that it is irrelevant how many checkboxes there are. You can get the index of an object by setting an attribute ‘order’ for example then call this.attr(‘order’) to get the order value and append to $(‘#clickDiv’ + order). You can also use the ID attribute and simple string manipulation to the same effect.

    • 0