jQuery API の prop( propertyName, function( [index][, oldValue] ) ) は、「propertyName」に指定したプロパティの値を関数で設定するメソッド。インデックス番号と現在のプロパティ値を、関数に引き渡すことができる。１つ目の引数が、インデックス番号。２つ目の引数が、現在のプロパティ値。
記述方法
jQuery( セレクター ) . prop( プロパティ名, function( インデックス, 現在のプロパティ値 ) {
return 新しいプロパティ値;
} );
return 新しいプロパティ値;
} );
「セレクター」に指定した要素の「プロパティ名」に指定したプロパティの値を、function関数で設定する。その際、「セレクター」に指定した要素の、インデックス番号と、「プロパティ名」に指定したプロパティの現在の値を、function関数に引き渡すことができる。
記述例
jQuery( 'input[type=checkbox]' ) . prop( 'checked', function( index, oldValue ) {
return !oldValue;
} );
return !oldValue;
} );
チェックボックス（type属性がcheckboxのinput要素）のcheckedプロパティの値を反転。checkedプロパティの値がtrueの場合、falseに変更し、checkedプロパティの値がfalseの場合、trueに変更する。
実装例（サンプル）
実装例（サンプル）の動作について
「すべて：」の右横の「選択」をクリックすると、すべての項目のチェックボックスにチェックを入れる。
「すべて：」の右横の「解除」をクリックすると、すべての項目のチェックボックスのチェックを外す。
「すべて：」の右横の「反転」をクリックすると、すべての項目のチェックボックスのチェックを反転する。チェックが入っているものはチェックを外し、チェックが入っていないものはチェックを入れる。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-smaple-a-1' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', true );
} );
jQuery( '#jquery-smaple-a-2' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', false );
} );
jQuery( '#jquery-smaple-a-3' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', function( index, oldValue ){
return !oldValue;
} );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-smaple-a-1' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', true );
} );
jQuery( '#jquery-smaple-a-2' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', false );
} );
jQuery( '#jquery-smaple-a-3' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', function( index, oldValue ){
return !oldValue;
} );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-smaple-form p {
margin: 5px;
}
#jquery-smaple-form input {
margin: 0;
}
#jquery-smaple-form a {
color: blue;
cursor: pointer;
}
#jquery-smaple-form a:hover {
color: red;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 2px 5px;
border: 1px solid gray;
border-radius: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
<!--
#jquery-smaple-form p {
margin: 5px;
}
#jquery-smaple-form input {
margin: 0;
}
#jquery-smaple-form a {
color: blue;
cursor: pointer;
}
#jquery-smaple-form a:hover {
color: red;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 2px 5px;
border: 1px solid gray;
border-radius: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
HTML
<div id="jquery-smaple-form">
<p>すべて：
<a id="jquery-smaple-a-1">選択</a>｜
<a id="jquery-smaple-a-2">解除</a>｜
<a id="jquery-smaple-a-3">反転</a>
</p>
<p>
<label>
<input type="checkbox" /> 項目１
</label>
<label>
<input type="checkbox" /> 項目２
</label>
<label>
<input type="checkbox" /> 項目３
</label>
<label>
<input type="checkbox" /> 項目４
</label>
<label>
<input type="checkbox" /> 項目５
</label>
</p>
</div>
<p>すべて：
<a id="jquery-smaple-a-1">選択</a>｜
<a id="jquery-smaple-a-2">解除</a>｜
<a id="jquery-smaple-a-3">反転</a>
</p>
<p>
<label>
<input type="checkbox" /> 項目１
</label>
<label>
<input type="checkbox" /> 項目２
</label>
<label>
<input type="checkbox" /> 項目３
</label>
<label>
<input type="checkbox" /> 項目４
</label>
<label>
<input type="checkbox" /> 項目５
</label>
</p>
</div>