-

2011年8月2日星期二

How do you make a header checkbox in HTML that connects to all the checkboxes in the same col?

-I want to create a table with some columns of text and one column of checkboxes. I also want a header checkbox to be associated with all the checkboxes in the same column. For example when I click on the header checkbox, all its children should also be checked or unchecked depending the number of clicks. If anyone knows how to do this, I would greatly appreciate it. Thank you.Umm... Hey Barkley, you didn't even come close to answering the question....





You need to some how separate the check boxes you want to be associated with the single click selector. I would suggest using a class, but you can use any method you want. Or you can simply do all child 'input' elements.



The link will take you to a page with examples.



http://pastebin.com/XxGBuXGF



http://pastebin.com/raw.php?i=XxGBuXGF





Feel free to contact me, through my profile page, if you have any follow up questions.



Cheers,



GitlezHere is a basic numbered table with header and the option to select all tick boxes in HTML.



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

<table id="tbl" border="10">

<thead>

<tr>

<td><input type="checkbox" id = "chckHead" /></td>

<td>First Row</td>

<td>Second Row</td>

<td>Third Row</td>

</tr>

</thead>

<tbody>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>2</td>

<td>2</td>

<td>2</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>4</td>

<td>4</td>

<td>4</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>5</td>

<td>5</td>

<td>5</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>6</td>

<td>6</td>

<td>6</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>7</td>

<td>7</td>

<td>7</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>8</td>

<td>8</td>

<td>8</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>9</td>

<td>9</td>

<td>9</td>

</tr>

<tr>

<td>

<input type="checkbox" class = "chcktbl" />

</td>

<td>10</td>

<td>10</td>

<td>10</td>

</tr>

</tbody>

</table>

</body>

</html>

没有评论:

发表评论