单击以在其他div中添加选定的无线电文本

Question

如何在使用jquery单击按钮后添加选定的广播文本以添加到其他div中。

我创建了这个Codepen DEMO

<div class="container">
   <div class="checkedWrap"></div>
   <div class="checkList">
      <div class="row demo">
    <input type="radio" id="checked" name="checkit" class="cbx hidden"/>
    <label for="checked" class="lbl"></label>TExt 1
  </div>
  <div class="row demo">
    <input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
    <label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
  </div>
  <div class="row">
    <input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
    <label for="unchecked_disabled" class="lbl">fdsafasf</label>
  </div>
   </div>
   <div class="Click">Click ok to add checked radio text from the red div</div>
</div>

Answer 1

首先将click个事件附加到button，然后使用:checked选择器获取所选输入广播，最后使用parent().text()从父级获取文本，检查例如，吼叫。

希望这有帮助。

$(document).ready(function() {
  $('body').on('click', '.Click', function(){
      var checked_radio_text = $('input[name=checkit]:checked').parent().text();
      $('.checkedWrap').text(checked_radio_text);
  })
});

.container {
   width:400px;
   height:auto;
   box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
  -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
  -moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
   margin:0px auto;
   margin-top:10px;
}
.checkedWrap {
   width:100%;
   float:left;
   padding:15px;
   background-color:#b71c1c;
   box-sizing:border-box;
}
.checkList {
   width:100%;
   padding:10px;
   box-sizing:border-box;
   float:left;
}

.lbl {
   float:left;
  position: relative;
  display: block;
  height: 20px;
  width: 44px;
  background: #898989;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  
}

.lbl:after {
  position: absolute;
  left: -2px;
  top: -3px;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  content: '';
  transition: all 0.3s ease;
}

.lbl:active:after { transform: scale(1.15, 0.85); }

.cbx:checked ~ label { background: #6fbeb5; }

.cbx:checked ~ label:after {
  left: 20px;
  background: #179588;
}

.cbx:disabled ~ label {
  background: #d5d5d5;
  pointer-events: none;
}

.cbx:disabled ~ label:after { background: #bcbdbc; }

.container {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.demo { 
   margin-bottom: 40px; 
   width:100%; 
   overflow:hidden;
   padding:5px;
   box-sizing:border-box;
   text-indent:10px;
}

.hidden { display: none; }

.Click {
   float:left;
  margin-top: 30px;
  color: #fff;
  height:30px;
   background-color:#0288d1;
   color:#ffffff;
   width:100%;
   box-sizing:border-box;
   text-align:center;
   line-height:30px;
   font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;	
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="checkedWrap"></div>
   <div class="checkList">
      <div class="row demo">
    <input type="radio" id="checked" name="checkit" class="cbx hidden"/>
    <label for="checked" class="lbl"></label>TExt 1
  </div>
  <div class="row demo">
    <input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
    <label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
  </div>
  <div class="row">
    <input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
    <label for="unchecked_disabled" class="lbl">fdsafasf</label>
  </div>
   </div>
   <div class="Click">Click ok to add checked radio text from the red div</div>
</div>

Answer 2

这段代码选择您当前选择的标签文本并将其插入顶部红色框：

$(document).ready(function() {
   $("body").on( "click",".Click",function(){
         var text = $("input[name=checkit]:checked").parent().find("span").text();
         $(".checkedWrap").text(text);
    });
});

还将纯文本包装到<span>中，使代码更清晰，更容易选择。

这里是working example。

Answer 3

这是脚本。

$(document).ready(function() {
    $('input[type=radio][name=checkit]').change(function () {
    jQuery('.checkedWrap').text($('input[name=checkit]:checked').parent().text());
   });
});