要素にクラスがある場合はチェックボックスを切り替えます

Question

要素を含むリストを作成しましたが、これをクリックするとクラスが「追加」されます。この要素はフォームに転送されます。したがって、リストから 'li'と同じクラスを持つチェックボックスのリストを作成しました。

私はjQueryスクリプトを書いています。これは、 'li'がクリックされた場合（hasClass）、適切なチェックボックスに属性 '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> 

チェックボックス：...私が間違って作られたもの

HTMLを知ってはいけない

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

をjQueryの：

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); 
     }); 

そこで問題は何をすべきか、あります私は、liにクラスが追加されている場合にチェックボックスがトリガされるように変更する必要があります。そうでない場合、チェックボックスをオフにする必要があります...

Answer 1

使用$check.find(class_check).prop('checked', 'checked');代わり

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 
 
     $check.find('.'+li_class[0]).trigger('click'); 
 
     if (($li).hasClass("added")) { 
 
     var class_check = '.' + li_class[0]; 
 
      $check.find(class_check).prop('checked', 'checked'); 
 
     } else { 
 
      $check.find('.'+li_class[0]).prop('checked', false); 
 
     } 
 

 
     $wrap.find('h1').toggleClass('top-added', $wrap.find('.added').length > 0); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 

 

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