Ravi K Chowdary Ravi K Chowdary - 1 year ago 77
CSS Question

Copied checkbox elected value from one div to another div

I have 2

with flip functionality. One div have multiple check boxed and another
is empty. When I selected check boxes in a div, these check boxes data values/ only labels has to be update in the another div when flip back. I have done flipping but the how to copy check box values/labels to another

My code: -

<meta charset="UTF-8">
<link rel="stylesheet" href="../../css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../../js/bootstrap.js"></script>
#two {
height: 40px;
width: 500px;
position: absolute;
top: 20px;
left: 340px;

background-color: lightgrey;

.vback {

.vflipper {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
.vflipper .vfront, .vflipper .vback{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
/* vertical flipping stuff */

.vflipper {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
.vflipper .vfront {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
.vflipper.vflip .vfront {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
.vflipper .vback {
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
.vflipper.vflip .vback {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);

<div id="two" class="vflipper">
<div class="vclick vfront">
<div class="pull-left">Model</div>
<label id="lbl"></label>
<div class="vback" id=val>
<label class="checkbox-inline"><input type="checkbox" value="name1">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="name2">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="name3">Option 3</label>
<div class="pull-right"><input type="submit" class="vclick "></div>


Here, the above code, flip is working perfectly . when I click on check boxes in the second div, the labels/ values has to be visible in the first div. Here, I am working with IE Edge browser.

Answer Source

Copy the check box label,

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            var sports = [];
            $.each($("input[name='sport']:checked"), function(){            

           $('#child').append(sports.join(", "));


    <div id="main">
        <label><input type="checkbox" value="football" name="sport"> Football</label>

        <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>

        <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>

        <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>

        <label><input type="checkbox" value="racing" name="sport"> Racing</label>

        <label><input type="checkbox" value="swimming" name="sport"> Swimming</label>

    <div id="child">


        <button type="button">Get Values</button>