从同一行检查复选框作为输入字段

时间:2014-07-20 02:46:35

标签: javascript jquery html

如果同一行中的选择下拉列表已选中,我想检查每个html行旁边的复选框。这是我的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;
    }
});

3 个答案:

答案 0 :(得分:1)

您可以简化遍历代码,并使用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);
   } 
});

此代码基于触发它的现有点击处理程序。有问题的目标不是很清楚

答案 1 :(得分:0)

你必须使用这样的东西:

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

JSFIDDLE DEMO

答案 2 :(得分:0)

下面的代码应该有效:

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