1つのdivから別のdivにコピーされたチェックボックス

2フリップ機能を持つdivsがあります。 1つのdivに複数のチェックボックスがあり、もう1つのdivが空です。 divのチェックボックスを選択すると、これらのチェックボックスのデータ値/唯一のラベルは、フリップバックするとき別のdivで更新する必要があります。私はフリップしたが、チェックボックスの値/ラベルを別のdivにコピーする方法は？1つの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>

、上記のコード、フリップを完璧に取り組んでいます。 2番目のdivのチェックボックスをクリックすると、最初のdivにラベル/値を表示する必要があります。ここでは、私はIE Edgeのブラウザで作業しています。

出典

2016-09-30 Ravikanth

変更イベントを使用して、すべての変更がチェックボックスで鳴るようにすることができます。

スニペット：

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

出典

2016-09-30 17:50:05 gaetanoM

コピーチェックボックスのラベル、

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

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

     }); 
    }); 

</script> 
    <form> 
    <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> 

     <br> 
    </div> 
    <div id="child"> 

    </div> 

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

    </form>

出典

2016-09-30 17:50:38 Samyappa

1つのdivから別のdivにコピーされたチェックボックス

答えて

関連する問題