Question

See the below code and screen. It’s a configuration screen.

• while clicks the Fieldname checkbox it will select all the checkbox and if we remove a check it will deselect all the checkbox.
• While clicks the Field1 checkbox. the child control will be select like (Add, Edit, Delete) and if we remove a check it will deselect checkbox.
• My question is how can I do this operation and how to get a value
• I’m using jQuery for this operation
• All the values are comes for database its a dynamic fields.

 <table width="100%">
        <tr style="background: #999; color: #FFF;">
            <td>
                <input class="checkbox" type="checkbox" name="field_name" value="yes" id="Checkbox1" />
                <label for="field_name" class="checkboxlabel">
                    Field Name</label>
            </td>
            <td>
                <input class="checkbox" type="checkbox" name="Add" value="yes" id="Checkbox2" />
                <label for="default" class="checkboxlabel">
                    Add</label>
            </td>
            <td>
                <input class="checkbox" type="checkbox" name="Edit" value="yes" id="Checkbox3" />
                <label for="default" class="checkboxlabel">
                    Edit</label>
            </td>
            <td>
                <input class="checkbox" type="checkbox" name="delete" value="yes" id="Checkbox4" />
                <label for="default" class="checkboxlabel">
                    Delete</label>
            </td>
        </tr>
        <tr class="row1">
            <td>
                <input class="checkbox" type="checkbox" name="field_1" value="yes" id="field_1" />
                <label for="field_1" class="checkboxlabel">
                    Field 1</label>
            </td>
            <td align="center">
                <input class="checkbox" type="checkbox" name="Add" value="yes" id="Checkbox5" />
            </td>
            <td align="center">
                <input class="checkbox" type="checkbox" name="Edit" value="yes" id="Checkbox6" />
            </td>
            <td align="center">
                <input class="checkbox" type="checkbox" name="delete" value="yes" id="Checkbox7" />
            </td>
        </tr>
        <tr class="row2">
            <td>
                <input class="checkbox" type="checkbox" name="field_1" value="yes" id="field_1" />
                <label for="field_1" class="checkboxlabel">
                    Field 2</label>
            </td>
            <td align="center">
                <input class="checkbox" type="checkbox" name="Add" value="yes" id="Checkbox8" />
            </td>
            <td align="center">
                <input class="checkbox" type="checkbox" name="Edit" value="yes" id="Checkbox9" />
            </td>
            <td align="center">
                <input class="checkbox" type="checkbox" name="delete" value="yes" id="Checkbox10" />
            </td>
        </tr>
    </table>

Answer 1

Please give an id to your table like id="mytable" and use this code

$("#mytable tr:first input[type=checkbox]").click(function() {
    var selector = $("#mytable td:first-child input[type=checkbox]")
    if (this.checked) {
        $(selector).attr("checked", "checked");
    }
    else {
        $(selector).removeAttr("checked");
    }
});

Working Demo: http://jsfiddle.net/naveen/ETKqx/