Question

我有2个divs具有翻转功能。一个div有多个复选框，另一个div为空。当我在div中选中复选框时，这些复选框数据值/仅标签在翻转时必须在另一个div中更新。我已经完成了翻转但是如何将复选框值/标签复制到另一个div？

我的代码： -

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
    <style>
        #two {
            height: 40px;
            width: 500px;
            position: absolute;
            top: 20px;
            left: 340px;
        }

       .vfront{
            background-color: lightgrey;
        }

        .vback {
            background-color:lightblue;
        }

        .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);
        }
    </style>
</head>

<body>
    <div id="two" class="vflipper">
        <div class="vclick vfront">
            <div class="pull-left">Model</div>
            <label id="lbl"></label>
        </div>
        <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>
        </div>
    </div>
</body>

<script>
    $(document).ready(function(){
        $('.vclick').click(function(){
            $(this).closest('.vflipper').toggleClass('vflip');
        });
    });       
</script>

这里，上面的代码，翻转工作完美。当我单击第二个div中的复选框时，标签/值必须在第一个div中可见。在这里，我正在使用IE Edge浏览器。

Answer 1

您可以使用更改事件来侦听每个更改复选框。

摘录：

$(document).ready(function(){
  $('.vclick').click(function(){
    $(this).closest('.vflipper').toggleClass('vflip');
  });
  
  
  //
  // Listen for change event 
  //
  $('.vback :checkbox').on('change', function(e) {
    //
    // get the labels list of all  checked elements
    //
    var result = $('.vback :checkbox:checked').map(function(index, element) {
      if (element.checked) {
        return element.parentNode.textContent + ' / ' + element.value;
      }
    }).get();
    
    //
    // add this text to the label
    //
    $('#lbl').text(result.join(', '))
  })
});

#two {
  height: 40px;
  width: 500px;
  position: absolute;
  top: 20px;
  left: 340px;
}

.vfront{
  background-color: lightgrey;
}

.vback {
  background-color:lightblue;
}

.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);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="two" class="vflipper">
    <div class="vclick vfront">
        <div class="pull-left">Model</div>
        <label id="lbl"></label>
    </div>
    <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>
    </div>
</div>

Answer 2

复制复选框标签

PrintWriter pw=new PrintWriter(s.getOutputStream(),true);
// ...
pw.println(st);
st = br.readLine();
System.out.println("the server says: "+ st);

复制的复选框从一个div到另一个div选择了值

2 个答案: