CODEWITHSUNDEEP
jquery
alphy
alphy

Reputation: 291

Check mark a table row containing selected option

I have a table with many rows, I would like that if i select a value in the select box in a given row, the checkbox in that row is checked and if the select box is having an empty value/no value the checkbox in that row is also unchecked.

My work so far 

 $('#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>

Upvotes: 0

Views: 656

Answers (2)

user557419
user557419

Reputation:

Below should do the trick

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

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to only target the checkbox in the same tr where current select lies:

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

Working Demo

Upvotes: 4

Related Questions