【jQuery】checkboxの全選択/全選択解除

jquery01

 

1クリックでチェックボックスの全選択と全解除をする方法。

 

HTML

<table width="627" border="1" cellpadding="5">
  <tr>
    <td width="41" align="center">
			<input type="checkbox" name="addele" id="all" />
		</td>
    <td width="570">全選択 / 全解除</td>
  </tr>
  <tr>
    <td align="center">
			<input type="checkbox" name="addele01" class="list" />
		</td>
    <td>あああああ</td>
  </tr>
  <tr>
    <td align="center">
    	<input type="checkbox" name="addele2" class="list" />
  	</td>
    <td>いいいいい</td>
  </tr>
  <tr>
    <td align="center">
    	<input type="checkbox" name="addele3" class="list" />
  	</td>
    <td>うううううう</td>
  </tr>
  <tr>
    <td align="center">
    	<input type="checkbox" name="addele4" class="list" />
  	</td>
    <td>えええええ</td>
  </tr>
  <tr>
    <td align="center">
    	<input type="checkbox" name="addele5" class="list" />
  	</td>
    <td>おおおおおおお</td>
  </tr>
  <tr>
    <td align="center">
    	<input type="checkbox" name="addele6" class="list" />
  	</td>
    <td>かかかかか</td>
  </tr>
  <tr>
    <td align="center">
  		<input type="checkbox" name="addele7" class="list" />
		</td>
    <td>ききききき</td>
  </tr>
</table>

 

JQuery

$(function() {
  $('#all').on("click",function(){
    $('.list').prop("checked", $(this).prop("checked"));
  });
});