Jquery 如果元素具有类,则切换复选框
我有一个包含元素的列表,单击这些元素可以“添加”类。此元素应转移到表格中。因此,我列出了一个复选框列表,这些复选框与列表中的“li”具有相同的类 我编写了一个jQuery脚本,它将检查是否单击了'li'(hasClass),然后适当的复选框应具有'checked'属性。但它不能正常工作。不知道我做错了什么 HTML: 所以问题是,我必须改变什么,如果li添加了类,复选框会被触发,如果没有,复选框应该被取消选中 使用Jquery 如果元素具有类,则切换复选框,jquery,checkbox,Jquery,Checkbox,我有一个包含元素的列表,单击这些元素可以“添加”类。此元素应转移到表格中。因此,我列出了一个复选框列表,这些复选框与列表中的“li”具有相同的类 我编写了一个jQuery脚本,它将检查是否单击了'li'(hasClass),然后适当的复选框应具有'checked'属性。但它不能正常工作。不知道我做错了什么 HTML: 所以问题是,我必须改变什么,如果li添加了类,复选框会被触发,如果没有,复选框应该被取消选中 使用$check.find(class_check).prop('checked','
$check.find(class_check).prop('checked','checked')代码>而不是.addAttr()
var$check=$(“.checker wrap”);
$(“.add btn”)。单击(函数(){
var$li=$(this.toggleClass(“隐藏我添加的haken”);
var li_class=$(this.attr('class').split(“”);
变量$wrap=$li.closest('.label wrap');
//窗体的触发器复选框
$check.find('..+li_类[0]).trigger('click');
如果($li).hasClass(“添加”)){
var class_check='.+li_class[0];
$check.find(class_check).prop('checked','checked');
}否则{
$check.find('..+li_class[0]).prop('checked',false);
}
$wrap.find('h1')。toggleClass('top-added'),$wrap.find('.added')。长度>0);
});代码>
康采普
通信策略
Zielgruppendefinition
科穆尼卡提斯马·纳赫曼
- 名称查找和登录Wicklung
- exposeé
文本设计
- Außenwerbung
- Bautafelgestaltung
网络营销
- 网站
社交媒体
- 数字声明
韦尔滕酒店
- InEnvisiualSierung
- Außenvisualisierung
- Virtuelle Begehung
增强现实
祖姆公式
代码片段可以工作,但在我的代码中不起作用。复选框位于隐藏的div中应该没有问题?@Buntstiftmuffin您确定在代码中包含了jquery,并在$(document).ready(function())
中编写了所有jquery。我添加了行$check.find('.+li_类[0]).trigger('click');在if语句之前。现在它起作用了。。。。因此,如果单击,它将被触发,并检查是否已添加类。如果没有,则未选中。但不知何故,它是双重触发的。这会导致任何问题吗?@Buntstiftmuffin需要什么。触发器('click')不应该是必需的。什么被触发两次。需要.trigger('click'),否则复选框不会被选中。这是一号触发器。和var class_check='.+li_class[0]$check.find(class_check).prop('checked','checked');也会触发它,是吗?
<div class="container">
<div class="row row-centered konf-wrapper-1">
<div class="col-md-4 label-wrap">
<h1 class="header-label">Konzeption</h1>
<ul class="li-wrap">
<li class="added haken">Kommunikationsstrategie</li>
<li class="0 hide-me add-btn point">Zielgruppendefinition</li>
</ul>
</div>
<div class="col-md-4 label-wrap">
<h1 class="header-label">Kommunikationsmaßnahmen</h1>
<ul class="li-wrap">
<li class="1 hide-me add-btn point">Namensfindung & Logoentwicklung</li>
<li class="2 hide-me add-btn point">Exposé</li>
<li class="3 hide-me add-btn point">Textdesign</li>
<li class="4 hide-me add-btn point">Anzeigenkampagnen</li>
<li class="5 hide-me add-btn point">Außenwerbung</li>
<li class="6 hide-me add-btn point">Bautafelgestaltung</li>
</ul>
</div>
</div>
<div class="row row-centered konf-wrapper-2 label-wrap">
<div class="col-md-4 label-wrap">
<h1 class="header-label">Online-Marketing</h1>
<ul class="li-wrap">
<li class="8 hide-me add-btn point">Website</li>
<li class="9 hide-me add-btn point">Social Media</li>
<li class="10 hide-me add-btn point">Digitale Präsentation</li>
</ul>
</div>
<div class="col-md-4 label-wrap">
<h1 class="header-label">Virtuelle Welten</h1>
<ul class="li-wrap">
<li class="11 hide-me add-btn point">Innenvisualisierung</li>
<li class="11 hide-me add-btn point">Außenvisualisierung</li>
<li class="12 hide-me add-btn point">Virtuelle Begehung</li>
<li class="13 hide-me add-btn point">Augmented Reality</li>
</ul>
</div>
</div>
<button type="button" class="btn btn-primary added-btn" title="Zur Übersicht." id="gesamt-weiter" >Zum Formular</button>
</div>
<div class="">
<ul class="checker-wrap">
<li><input type="checkbox" id="0" value="Zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="2" value="Exposé" class="2 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="3" value="Textdesign" class="3 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="4" value="Anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="5" value="Außenwerbung" class="5 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="6" value="Bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="8" value="Website" class="8 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="9" value="Social Media" class="9 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="10" value="Digitale Präsentation" class="10 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="11" value="Visualisierungen" class="11 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="12" value="Virtuelle Begehung" class="12 checker" name="checkbox-group[]"></li>
<li><input type="checkbox" id="13" value="Augmented Reality" class="13 checker" name="checkbox-group[]"></li>
</ul>
</div>
var $check = $(".checker-wrap");
$(".add-btn").click(function() {
var $li = $(this).toggleClass("hide-me added haken");
var li_class = $(this).attr('class').split(" ");
var $wrap = $li.closest('.label-wrap');
// trigger checkbox for form
if (($li).hasClass("added")) {
$check.find('.'+li_class[0]).addAttr('checked');
} else {
$check.find('.'+li_class[0]).removeAttr('checked');
}
$wrap.find('h1').toggleClass('top-added', $wrap.find('.added').length > 0);
});