选中包含所选选项的表格行

时间:2015-02-24 15:29:48

标签: jquery

我有一个包含很多行的表,我希望如果我在给定行的选择框中选择一个值,则检查该行中的复选框,如果选择框具有空值/无值,该行中的复选框也未选中。

到目前为止我的工作

 $('#the_worksheettable  .selectbox_1').change(function(){
            value =$(this).val();
            if(value !==''){
               $('.checkbox_1').prop('checked',true); 
            }else{
              $('.checkbox_1').prop('checked',false);    
            }
        }); 



<table class="tg" id="the_worksheettable">
            <tr>
                <th class="tg-031e">ID</th>
                <th class="tg-031e">TEST NAME</th>
                <th class="tg-031e">TEST NAME / MOLECULE</th>
                 <th class="tg-031e">SELECTOR</th>
            </tr>
            <tbody>
                            <tr>
                    <td class="tg-031e">1</td>
                    <td class="tg-ugh9">Capsule with Acid and buffer</td>
                    <td><select name="molecule[]" id="" class="selectbox_1"> 
                                    <option value="">-Select-</option>
                                   <option value="Uniformity">Uniformity</option>
                                    <option value="Relative Density">Relative Density</option>
                                     <option value="Trimethoprim">Trimethoprim</option>

                        </select></td>
                    <td class="tg-031e"><input type="checkbox" value="Capsule_with_Acid_and_buffer"name="test_names[]" class="checkbox_1"/></td>

                </tr>
                                <tr>
                    <td class="tg-031e">1</td>
                    <td class="tg-ugh9">Capsule with Acid and buffer</td>
                    <td><select name="molecule[]" id="" class="selectbox_1"> 
                                    <option value="">-Select-</option>
                                   <option value="Uniformity">Uniformity</option>
                                    <option value="Relative Density">Relative Density</option>
                                     <option value="Sulfamethoxazole">Sulfamethoxazole</option>

                        </select></td>
                    <td class="tg-031e"><input type="checkbox" value="Capsule_with_Acid_and_buffer"name="test_names[]" class="checkbox_1"/></td>

                </tr>
                                <tr>
                    <td class="tg-031e">2</td>
                    <td class="tg-ugh9">Uniformity of Weight</td>
                    <td><select name="molecule[]" id="" class="selectbox_1"> 
                                    <option value="">-Select-</option>
                                   <option value="Uniformity">Uniformity</option>
                                    <option value="Relative Density">Relative Density</option>
                                     <option value="Trimethoprim">Trimethoprim</option>

                        </select></td>
                    <td class="tg-031e"><input type="checkbox" value="Uniformity_of_Weight"name="test_names[]" class="checkbox_1"/></td>

                </tr>
                                <tr>
                    <td class="tg-031e">2</td>
                    <td class="tg-ugh9">Uniformity of Weight</td>
                    <td><select name="molecule[]" id="" class="selectbox_1"> 
                                    <option value="">-Select-</option>
                                   <option value="Uniformity">Uniformity</option>
                                    <option value="Relative Density">Relative Density</option>
                                     <option value="Sulfamethoxazole">Sulfamethoxazole</option>

                        </select></td>
                    <td class="tg-031e"><input type="checkbox" value="Uniformity_of_Weight"name="test_names[]" class="checkbox_1"/></td>

                </tr>

2 个答案:

答案 0 :(得分:4)

您只需要定位当前选择所在的同一个tr中的复选框:

$('#the_worksheettable  .selectbox_1').change(function(){
  $(this).closest('tr').find('.checkbox_1').prop('checked', $(this).val()!=="");
}); 

<强>

<强> Working Demo

答案 1 :(得分:3)

下面应该做的伎俩

$('#the_worksheettable  .selectbox_1').change(function(){
    var value = $(this).val();
    if(value !== ''){
        $(this).closest('tr').find('.checkbox_1').prop('checked',true); 
    }else{
        $(this).closest('tr').find('.checkbox_1').prop('checked',false);    
    }
});