проведите цикл через каждый вход и цикл и сравните

Question

Как вы можете видеть из нижеприведенного фрагмента, я сначала получаю текущую родительскую строку («.role_td_holder») текущей кнопки щелчка и нахожу divs, у которого есть класс «.role_wrapper «внутри него, а затем помещаем его в переменную с именем« this_roletr », а затем прокручиваем каждый вход .flatRoundedCheckbox, создаем глобальную переменную с именем« role_name », а затем прокручиваем каждый divs, который имеет класс« role_wrapper », а затем получаем каждый текст и поместить его в глобальную переменную «role_name», а затем в цикле «.flatRoundedCheckbox input». Я сравниваю, если текущий атрибут атрибута имени текущего петлевого ввода равен содержимому с именем role_name, если он затем помещает проверенное свойство в этот текущий цикл введите else, если он не установил свойство checked в значение false. Как показано ниже, он работает, но проверяется только один флажок, когда на самом деле два файла .role_wrapper или несколько, которые соответствуют его тексту, любому имени .flatRoundedCheckbox (например, если два div, которые имеют класс «role_wrapper», установлен только один флажок проверяется, когда предположительно, должен быть установлен два флажка, который соответствует его атрибуту атрибута имени для этих div, которые имеют класс текста «role_wrapper». Любая помощь, идеи, предложения, рекомендации, помощь приветствуются.

$(document).ready(function(){ 
 
    $(document).on("click", ".trigger", function(){ 
 
      var this_roletr = $(this).parents(".role_td_holder").find(".role_wrapper"); 
 
      $("#checkbox_container .flatRoundedCheckbox input[type='checkbox']").each(function(){ 
 
       var checkbox = $(this); 
 
       this_roletr.each(function(){ 
 
        var role_name = $(this).text(); 
 
        if(checkbox.attr("name") === role_name){ 
 
         checkbox.prop("checked", true); 
 
        }else{ 
 
         checkbox.prop("checked", false); 
 
        } 
 
       }); 
 

 

 
      }); 
 

 
    }); 
 
});

table, theader, th, tbody, tr, td, a, .extend{max-width: 100%;max-height: 100%;} 
 
a:focus, a:active{outline: none;text-decoration: none;} 
 
a, span, .cosbox_notify, .transation{-webkit-transition: all 200ms ease-in-out;-moz-transition: all 200ms ease-in-out;-ms-transition: all 200ms ease-in-out;-o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;} 
 
.bgwhite{background: #fff;} 
 
.center{margin-left: auto;margin-right: auto;} 
 
.clear{clear: both;float: none;} 
 
.fade {transition: all 300ms linear 700ms;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;} 
 
.fade.out {opacity: 0;} 
 
.table_scroll, .overflow_container{overflow: auto;} 
 
.table_scroll_y{overflow-x: hidden; overflow-y: auto;} 
 
.table_scroll_x{overflow-x: auto; overflow-y: hidden;} 
 
.align_left{float: left;} 
 
.align_right{float: right;} 
 
.display_table{display: table;} 
 
.display_block{display: block;} 
 
.overflow_hidden{overflow: hidden;} 
 
.overflow_auto{overflow: auto}; 
 
.overflow_x{overflow-x: auto}; 
 
.overflow_y{overflow-y: auto}; 
 
.inline_block{display: inline-block;} 
 
.divider{height: 10px;} 
 
.padding_2px{padding: 2px;} 
 
.padding_3px{padding: 3px;} 
 
.padding_4px{padding: 4px;} 
 
.padding_5px{padding: 5px;} 
 
.padding_6px{padding: 6px;} 
 
.padding_7px{padding: 7px;} 
 
.padding_8px{padding: 8px;} 
 
.padding_9px{padding: 9px;} 
 
.padding_10px{padding: 10px;} 
 
.margin_left2px{margin-left: 2px;} 
 
.margin_left3px{margin-left: 3px;} 
 
.margin_left4px{margin-left: 4px;} 
 
.margin_left5px{margin-left: 5px;} 
 
.margin_left6px{margin-left: 6px;} 
 
.margin_left7px{margin-left: 7px;} 
 
.margin_left8px{margin-left: 8px;} 
 
.margin_left9px{margin-left: 9px;} 
 
.margin_left10px{margin-left: 10px;} 
 
.margin_right2px{margin-right: 2px;} 
 
.margin_right3px{margin-right: 3px;} 
 
.margin_right4px{margin-right: 4px;} 
 
.margin_right5px{margin-right: 5px;} 
 
.margin_right6px{margin-right: 6px;} 
 
.margin_right7px{margin-right: 7px;} 
 
.margin_right8px{margin-right: 8px;} 
 
.margin_right9px{margin-right: 9px;} 
 
.margin_right10px{margin-right: 10px;} 
 
.margin_top2px{margin-top: 2px;} 
 
.margin_top3px{margin-top: 3px;} 
 
.margin_top4px{margin-top: 4px;} 
 
.margin_top5px{margin-top: 5px;} 
 
.margin_top6px{margin-top: 6px;} 
 
.margin_top7px{margin-top: 7px;} 
 
.margin_top8px{margin-top: 8px;} 
 
.margin_top9px{margin-top: 9px;} 
 
.margin_top10px{margin-top: 10px;} 
 
.margin_bottom2px{margin-bottom: 2px;} 
 
.margin_bottom3px{margin-bottom: 3px;} 
 
.margin_bottom4px{margin-bottom: 4px;} 
 
.margin_bottom5px{margin-bottom: 5px;} 
 
.margin_bottom6px{margin-bottom: 6px;} 
 
.margin_bottom7px{margin-bottom: 7px;} 
 
.margin_bottom8px{margin-bottom: 8px;} 
 
.margin_bottom9px{margin-bottom: 9px;} 
 
.margin_bottom10px{margin-bottom: 10px;} 
 
.status_approve{color: #76b729 !important;} 
 
.status_reject{color: #eb5959 !important;} 
 
.status_pending{color: #ebca59 !important;} 
 
.green_button{ 
 
    margin: 0 auto; 
 
    display: block; 
 
    text-transform: uppercase; 
 
    font: normal 13px 'mpregular', sans-serif; 
 
    color: #fff; 
 
    padding: 7px 7px 3px 7px; 
 
    width: 85px; 
 
    color: #fff; 
 
    border-top: none; 
 
    border-left: none; 
 
    border-right: none; 
 
    border-bottom: 3px solid #659d24; 
 
    background: #76b729; 
 
    text-align: center; 
 
    
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;} 
 
.green_button:focus, .green_button:active{outline: none;} 
 
.flatRoundedCheckbox 
 
{ 
 
    width: 40px; 
 
    height: 21px; 
 
    position: relative; 
 
} 
 
.flatRoundedCheckbox div 
 
{ 
 
    width: 100%; 
 
    height:100%; 
 
    background: #d3d3d3; 
 
    border-radius: 50px; 
 
    position: relative; 
 
} 
 

 
.flatRoundedCheckbox label 
 
{ 
 
    display: block; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50px; 
 

 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    transition: all .5s ease; 
 

 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 2px; 
 
    z-index: 1; 
 
    left: 3px; 
 
    background: #FFF; 
 
    
 
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3); 
 
-moz-box-shadow: 0 2px 1px rgba(0,0,0,0.3); 
 
box-shadow: 0 2px 1px rgba(0,0,0,0.3); 
 
} 
 
.flatRoundedCheckbox input[type="checkbox"]{ 
 
    display: none; 
 
} 
 
.flatRoundedCheckbox input[type=checkbox]:checked ~ div 
 
{ 
 
    background: #4fbe79; 
 
} 
 

 
.flatRoundedCheckbox input[type=checkbox]:checked ~ label { 
 
    left: 22px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead><th>Full name</th><th>role</th><th>Option</th></thead> 
 
    <tbody> 
 
    <tr class="role_td_holder"> 
 
     <td>Full name 1</td> 
 
     <td> 
 
     <div class="display_table center role_wrapper_container"> 
 
      <button class="draggable extend role_wrapper">Role 1</button> 
 
     </div> 
 
     <div class="display_table center role_wrapper_container"> 
 
      <button class="draggable extend role_wrapper">Role 2</button> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <button class="trigger">Click</button> 
 
     </td> 
 
    </tr> 
 
    <tr class="role_td_holder"> 
 
     <td>Full name 1</td> 
 
     <td> 
 
     <div class="display_table center role_wrapper_container"> 
 
      <button class="draggable extend role_wrapper">Role 1</button> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <button class="trigger">Click</button> 
 
     </td> 
 
    </tr> 
 
    <tr class="role_td_holder"> 
 
     <td>Full name 1</td> 
 
     <td> 
 
     <div class="display_table center role_wrapper_container"> 
 
      <button class="draggable extend role_wrapper">Role 1</button> 
 
     </div> 
 
     <div class="display_table center role_wrapper_container"> 
 
      <button class="draggable extend role_wrapper">Role 2</button> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <button class="trigger">Click</button> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<div class="extend clear padding_7px overflow_auto" id="checkbox_container"> 
 
       
 
       <div class="display_table align_left margin_right3px margin_bottom3px"> 
 
      <div class="display_block align_left margin_right3px checkbox_label" style="font-size: 13px;">Role 1</div> 
 
      <div class="flatRoundedCheckbox align_left"> 
 
       <input type="checkbox" value="5" name="Role 1"> 
 
       <label></label> 
 
       <div></div> 
 
      </div> 
 
     </div> 
 
       <div class="display_table align_left margin_right3px margin_bottom3px"> 
 
      <div class="display_block align_left margin_right3px checkbox_label" style="font-size: 13px;">Role 2</div> 
 
      <div class="flatRoundedCheckbox align_left"> 
 
       <input type="checkbox" value="6" name="Role 2"> 
 
       <label></label> 
 
       <div></div> 
 
      </div> 
 
     </div> 
 
       <div class="display_table align_left margin_right3px margin_bottom3px"> 
 
      <div class="display_block align_left margin_right3px checkbox_label" style="font-size: 13px;">Role 3</div> 
 
      <div class="flatRoundedCheckbox align_left"> 
 
       <input type="checkbox" value="7" name="Role 3"> 
 
       <label></label> 
 
       <div></div> 
 
      </div> 
 
     </div> 
 
      </div>

Answer 1

попробовать это

$(this).parents(".role_td_holder").find(".role_wrapper").each(function(){ 
       var role_name = $.trim($(this).text()); 
       $("#checkbox_container .flatRoundedCheckbox input[type='checkbox']").each(function(){ 
        if($(this).attr("name") === role_name){ 
         $(this).prop("checked", true); 
        } 
        // alert("asdasd"); 
       }); 

      });