Question

I’m pretty novice at jquery but I have a table with a field in each row that is dependent on another field (checkbox) in the row. Since its in a table I need to handle them in bulk. I don’t think I’m using next() correctly but I’m trying to grab the next .subnet_mask since it will be the one in the same row as hide it. I’ll also have to update it once I get that far so that it handles hiding and showing if the checkbox is checked or not.

$(function() {
    $('.dhcp').each(function() {
        $(this).click(function(){
            $('.subnet_mask').next().hide();
        });
    });
});

Any help is appreciated!

EDIT: ok ok 🙂 well the page is actually written in VisualForce (for salesforce). For simplicty sake lets say its just a form wrapped around a table (up to 20 rows representing different records) displaying a checkbox field with the class .dhcp and a field after it called .subnet_mask that should be shown/hidden based on the checkbox. Is that helpful?

Answer 1

I’d suggest the following, though this suggestion may well change once I see the relevant HTML:

$('.dhcp').click(
    function(){
        $(this).closest('tr').find('.subnet_mask').hide();
    });

This assumes that there will be only one .subnet_mask element per row (otherwise this will hide all of them) in response to the click event. You mention that this depends upon a checkbox, so perhaps the following would be better, using the change() method:

$('.dhcp').change(
    function(){
        var that = $(this);
        if (that.is(':checked')) {
            that.closest('tr').find('.subnet_mask').hide();
        }
        else {
            that.closest('tr').find('.subnet_mask').show();
        }
    });

References:

• change().
• :checked selector.
• click().
• closest().
• find().
• hide().
• is().
• show().