More than 5 years have passed since last update.

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

jQuery

Last updated at 2015-03-24Posted at 2015-03-19

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'));
});

jQuery 1.11.2を利用しGoogle Chrome 41.0.2272.89 mで確認。
参考: https://www.softel.co.jp/blogs/tech/archives/2488

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()を利用すると見た感じわかりやすそう。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up