Edited at

直近の祖先要素に囲まれているcheckboxを操作する #jQuery

More than 3 years have passed since last update.


HTML


  • 次のようなHTMLがあって、<a>から見た直近の祖先要素<div>に囲まれているcheckboxだけ操作するような場合。

<div>

<div>
<a href="javascript:void(0)" class="on">チェックする</a><br>
<a href="javascript:void(0)" class="off">チェック外す</a>
<div>
<label><input type="checkbox">チェックボックス</label>
</div>
</div>
<div>
<a href="javascript:void(0)" class="on">チェックする</a><br>
<a href="javascript:void(0)" class="off">チェック外す</a>
<div>
<label><input type="checkbox">チェックボックス</label>
</div>
</div>
</div>


  • <a>から見た直近の祖先要素<div>と<div>に囲まれている部分

<div>

<a href="javascript:void(0)" class="on">チェックする</a><br>
<a href="javascript:void(0)" class="off">チェック外す</a>
<div>
<label><input type="checkbox">チェックボックス</label>
</div>
</div>


jQuery (javascript)


  • <a>タグをクリックしたときに<a>から見た直近の祖先要素<div>を$(this).closest('div')で参照して同じく囲まれているcheckboxのチェック状態だけ変更する。

$('a').on('click', function(){

$('input[type="checkbox"]', $(this).closest('div')).prop('checked', $(this).hasClass('on'));
});


Example

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a').on('click', function(){
$('input[type="checkbox"]', $(this).closest('div')).prop('checked', $(this).hasClass('on'));
});
});
</script>
</head>
<body>
<form>
<div>
<div>
<a href="javascript:void(0)" class="on">チェックする</a><br>
<a href="javascript:void(0)" class="off">チェック外す</a>
<div>
<label><input type="checkbox" value="A">チェックA</label><br>
<label><input type="checkbox" value="B">チェックB</label><br>
<label><input type="checkbox" value="C">チェックC</label>
</div>
</div>
<hr>
<div>
<a href="javascript:void(0)" class="on">チェックする</a><br>
<a href="javascript:void(0)" class="off">チェック外す</a>
<div>
<label><input type="checkbox" value="A">チェックA</label><br>
<label><input type="checkbox" value="B">チェックB</label><br>
<label><input type="checkbox" value="C">チェックC</label><br>
<label><input type="checkbox" value="D">チェックD</label><br>
<label><input type="checkbox" value="E">チェックE</label><br>
<label><input type="checkbox" value="F">チェックF</label>
</div>
</div>
<hr>
<div>
<a href="javascript:void(0)" class="on">チェックする</a><br>
<a href="javascript:void(0)" class="off">チェック外す</a>
<div>
<label><input type="checkbox" value="A">チェックA</label><br>
<label><input type="checkbox" value="B">チェックB</label>
</div>
</div>
</div>
</form>
</body>
</html>


  • jQueryをダウンロードして用いる場合は別途入手する。

    https://jquery.com/ (英語)


どのようなときに利用できそうか?



  • .parent().parent()のように親要素のさらに親要素を参照したい場合など.closest()を利用すると見た感じわかりやすそう。


参考