左右移动复选框

<script language="javascript" type="text/javascript">
    
    /*
    @param1 - sourceid - This is the id of the multiple select box whose item has to be moved.
    @param2 - destinationid - This is the id of the multiple select box to where the iterms should be moved.
  */

  //this will move selected items from source list to destination list
  function move_list_items(sourceid, destinationid)
  {
    $("#"+sourceid+"  option:selected").appendTo("#"+destinationid);
  }

  //this will move all selected items from source list to destination list
  function move_list_items_all(sourceid, destinationid)
  {
    $("#"+sourceid+" option").appendTo("#"+destinationid);
  }

</script>


####

<div id="demo" class="container">
          <div class="page-header"><h3>Demo</h3></div>

          <h4 id="demo-zero-configuration">Zero configuration</h4>

          <div class="row">
              <div class="col-sm-5">
                  <select name="from" id="from" class="form-control" size="8" multiple="multiple">
                      <option value="1" data-position="1">Item 1</option>
                      <option value="2" data-position="2">Item 5</option>
                      <option value="2" data-position="3">Item 2</option>
                      <option value="2" data-position="4">Item 4</option>
                      <option value="3" data-position="5">Item 3</option>
                  </select>
              </div>

              <div class="col-sm-2">
                  <button type="button" id="multiselect_rightAll" class="btn btn-block" onclick="move_list_items_all('from','to');"><i class="glyphicon glyphicon-forward"></i></button>
                  <button type="button" id="multiselect_rightSelected" class="btn btn-block" onclick="move_list_items('from','to');"><i class="glyphicon glyphicon-chevron-right"></i></button>
                  <button type="button" id="multiselect_leftSelected" class="btn btn-block" onclick="move_list_items('to','from');"><i class="glyphicon glyphicon-chevron-left"></i></button>
                  <button type="button" id="multiselect_leftAll" class="btn btn-block" onclick="move_list_items_all('to','from');"><i class="glyphicon glyphicon-backward"></i></button>
              </div>

              <div class="col-sm-5">
                  <select name="to" id="to" class="form-control" size="8" multiple="multiple"></select>
              </div>
          </div>

              </div>
#####
效果图