开发者

jQuery: check checkboxes for columns with the same names that are visible?

I would like to use the classnames of table cells to check checkboxes of the corresponding value, using jQuery. I don't know if I need to use eval or something similar.

Code:

<p style="float:right;">
These columns are visible: 
<br/><input type="checkbox" name="vehicle" value="col1" /> Col1
<br/><input type="checkbox" name="vehicle" value="col2" /> Col2
<br/><input type="checkbox" name="vehicle" value="col3" /> Col3
</p>
<table id="comptable">
<tr> 
<td class="col1">Col1</td>
<td class="col2" style="display:none;">开发者_高级运维;Col2</td>
<td class="col3">Col3</td>
</tr>
</table>
$(document).ready(function(){
    var visible_tds = $('comptable td:visible');
    // Check the checkboxes that correspond to the visible table cells.
    $.each(visible_tds, function() { 
       // use ($(this).attr('class'))
       // to check the checkbox?
    });
});

JSFiddle: http://jsfiddle.net/TJ3zN/5/


You can do it like this:

$(document).ready(function(){
    // Check the checkboxes that correspond to the visible ones
    $('#comptable td:visible').each(function() { 
        $("input[value='" + $(this).attr('class') + "']").attr('checked', true);
    });
});

The input[value=''] selector will return any inputs with the attribute value that matches whatever you specify inbetween the '' marks.

You were also missing a # from the beginning of your the compatable selector. The table has the ID of compatable so to select an ID you have to put a # before it.


$(document).ready(function(){
    $('#comptable td:visible').each(function() {
       $("input[type=checkbox][value='" + $(this).attr("class") + "']").prop("checked", true);
    });
});

That should do the trick. It finds the checkbox with value equal to the value of the class attribute of each visible td, and set the checked property to true (note that you will have to be using jQuery 1.6 at least to use the prop function, otherwise, you'll have to use attr).

You can see it running here.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜