Javascript Jquery添加选中的无线电父div类

我有一个关于添加类的问题

我从codepen.io创建了这个

在这个演示中，您可以看到树单选按钮。当您在选中单选按钮之后单击蓝色按钮时，.checkedWrap文本将发生更改

我还想在此

中添加一些类。checkedWrap

所以当你点击

<div class="row demo">
    <input type="radio" id="checked" name="checkit" class="cbx hidden"/>
    <label for="checked" class="lbl"></label>TExt 1
    <div id="1" class="addthisClassone"></div>
  </div> 

单击蓝色按钮后，如何执行此操作。在这方面，任何人都可以帮助我

CSS

---

如果你想用JavaScript添加一个类，你可以使用jQuery，它有一个函数

检查。它向特定的jQuery DOM元素添加了一个新类

addClass

将指定的类添加到 匹配元素

试试这个

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

---

我建议添加一个额外的常规

class

，而不是

ids

，要在每个单选按钮上存储要更改的类，请查看下面的示例

注意：要添加类，您可以使用功能，但该功能将附加类，因此每次单击“新建类”时，您都可以在每次单击时使用重置类属性，并添加默认类

选中包裹

和新类：

$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);

希望这有帮助

---

一小条

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'click'，'function（）上{
var checked_radio_text=$（'input[name=checkit]：checked'）。parent（）.text（）；
var additional_class=$（'input[name=checkit]：checked'）.parent（）.find（'.global class'）.data（'additional-class'）；
$（'.checkedWrap'）.text（选中的文本）；
$（'.checkedWrap'）.removeClass（）.addClass（'checkedWrap'+附加类）；
});
});
.container{
宽度：400px；
高度：自动；
盒影：rgba（0,0,0,0.2）0 13px 13px 0；
-webkit盒阴影：rgba（0,0,0,0.2）0 13px 13px 0；
-moz盒阴影：rgba（0,0,0,0.2）013px13px0；
保证金：0px自动；
边缘顶部：10px；
}
.格子纸{
宽度：100%！重要；
浮动：左；
填充：15px；
背景色：#b71c1c；
框大小：边框框；
}
.检查表{
宽度：100%；
填充：10px；
框大小：边框框；
浮动：左；
}
.lbl{
浮动：左；
位置：相对位置；
显示：块；
高度：10px；
宽度：34px；
背景#8989；
边界半径：100px；
光标：指针；
过渡：所有0.3秒缓解；
}
.lbl:之后{
位置：绝对位置；
左：-2px；
顶部：-5px；
显示：块；
宽度：20px；
高度：20px；
边界半径：100px；
背景：#fff；
盒影：0px 3px 3px rgba（0,0,0,0.05）；
内容：''；
过渡：所有0.3秒缓解；
}
.lbl:active:after{transform:scale（1.15,0.85）；}
.cbx:选中~label{background:#6fbeb5；}
.cbx:选中~标签：之后{
左：20px；
背景：#179588；
}
.cbx:已禁用~标签{
背景#d5d5d5；
指针事件：无；
}
.cbx:disabled~label:after{background:#bcbdbc；}
.集装箱{
位置：绝对位置；
顶部：250px；
左：50%；
转换：翻译（-50%，-50%）；
}
.demo{
填充：30px；
宽度：100%；
溢出：隐藏；
填充物：5px；
框大小：边框框；
文本缩进：10px；
}
.hidden{显示：无；}
.点击{
浮动：左；
边缘顶部：30px；
颜色：#fff；
高度：30px；
背景色：#0288d1；
颜色：#ffffff；
宽度：100%；
框大小：边框框；
文本对齐：居中；
线高：30px；
字体系列：helvetica、arial、无衬线字体；
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
光标：指针；
}
.addthisClassone{
宽度：10px；
高度：10px；
背景颜色：蓝色；
}
.AddThisClass2{
背景颜色：绿色；
宽度：10px；
高度：10px；
}
.addthisClasstree{
背景色：黑色；
宽度：10px；
高度：10px；
}

文本1
fdsaf asdfasd fasdf
fdsafasf
单击“确定”从红色div添加选中的单选文本
老实说，你的问题比问题更糟，读它会伤我的大脑。
：/
。当你做什么时，你想添加什么类？试着添加这个
$（“#checkedWrap”）.addClass（“addthisClasstree”）在您的jquery@LittlePhild如果我使用
$（this.addClass（“addthisClasstree”）
然后它将只添加
addthisClasstree
，但也有
addthisClasstwo
和
addthisClassone
这不是解决方案。您只添加了
addthisClasstree
，但是
中还有
addthisClasstwo
和
addthisClassone
是否要在同一元素中添加
addthisClasstree
和
addthisClasstwo
类有树单选按钮。id已检查
，
已检查1
，
已检查2
。当您选中
id=“checked”
时，需要从
checkedWrap
添加
addthisClassone
。或者当您选中
id=“checked1”
时，需要从
checkedWrap
添加
addThisClass2
。对于
id=“checked2”
$('body').on('click', '.Click', function(){
      var checked_radio_text = $('input[name=checkit]:checked').parent().text();
      $('.checkedWrap').text(checked_radio_text);
  });

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

$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);