循环遍历每个输入并再次循环并比较

Question

从下面的代码片段中可以看出，我首先获取当前单击按钮的当前父行（“.role_td_holder”），并找到其中包含“.role_wrapper”类的div，然后将其放在变量名为“this_roletr”，然后循环遍历每个.flatRoundedCheckbox输入，创建一个名为“role_name”的全局变量，然后遍历每个具有“role_wrapper”类的div，然后获取每个文本并将其放在全局变量上“ “role_name”然后在“.flatRoundedCheckbox输入”的循环中“我比较当前循环输入的名称属性内容是否等于role_name内容，如果确实如此，则将checked属性放入此当前循环输入，否则设置为否则设置checked属性为false。如下面的片段，它可以工作，但只有一个复选框被检查，当实际上两个.role_wrapper或多个匹配其文本与任何.flatRoundedCheckbox输入名称（例如，如果有两个div具有类“role_wrapper，只有一个复选框是据推测，必须检查两个复选框，将其名称属性内容与具有“role_wrapper”文本类的div匹配。任何帮助，想法，建议，推荐，帮助都非常感谢。谢谢！

$(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");
                });

            });