選中同一行中的複選框作爲輸入字段

Question

我想檢查每個html行旁邊的複選框，如果同一行中的select下拉列表選擇了某些內容。這是我的HTML代碼和腳本。有人可以指出什麼是錯的？

<tr> 
    <td>Sohail Abbasi</td> 
    <td>N&amp;S</td> 
    <td>1</td> 
    <td>2013-01-03</td> 
    <td>Thursday</td> 
    <td>09:21</td> 
    <td></td> 
    <td> 
    <select class="form-control" name="duty_status[3]"> 
     <option value="" selected="selected">Select...</option> 
     <option value="2">Short Leave</option><option value="5">OD</option> 
    </select>        
    </td> 
    <td><input class="form-control" name="user_comments[3]" type="text"></td> 
    <td> 
     <input name="submit[]" type="checkbox" value="3">     
    </td> 
</tr> 

的Javascript：

$('#SelectFilled').click(function($e) 
{ 
    var elements=$('select[name^=duty_status]'); 
    var checkboxes=new Array(); 
    for (var i=0; i<elements.length; i++) { 
     if(elements[i].value) 
     { 
      var parent=elements[i].parentNode.parentNode; 
      checkboxes[checkboxes.length]=parent.lastChild.firstChild; 
     } 
    } 
    for (var j=0; j<checkboxes.length; j++) { 
     checkboxes[j].checked=true; 
    } 
}); 

Answer 1

您可以simplfy您遍歷代碼，並使其更容易通過使用jQuery方法進行閱讀：

$('select[name^=duty_status]').each(function(){ 
    if(this.value === VALUE_I_WANT){ /* not sure where this value comes from */ 
    $(this).closest('tr').find(':checkbox').prop('checked', true); 
    } 
}); 

此代碼基於觸發它的現有點擊處理程序。有問題的目標也不是很清楚

Answer 2

你將不得不使用這樣的事情：

$(function() { 
    $('td > select').on('change', function() { 
     var chk = $(this).closest('tr').find(':checkbox'); 
     chk.prop('checked', this.selectedIndex !== 0);    
    }) 
    .change(); 
}); 

JSFIDDLE DEMO

Answer 3

下面的代碼應該工作：

$('select[name^=duty_status]').on('change', function(){ 
    if($(this).val() != ""){ //better put some value on the first option.. 
     $(this).parents("tr").find(":checkbox").prop('checked', true); 
    }else{ 
     $(this).parents("tr").find(":checkbox").prop('checked', false); 
    } 
});