JS、jQueryでチェックボックスにチェックされていない項目を取得する場合

###前提・実現したいこと
エンジニアを始めて約3か月の者です。
JSもしくはjQueryで絞り込みボタンをクリックしたときにチェックボックスで選択されている項目のみを表示する機能を実装をしようと思っています。そのためにチェックボックスにチェックがない項目にaddClass等を用いて、display:noneに対応するクラスを追加することでチェックされていない項目のみ非表示にし、絞り込み表示をしようと思っています。個人的にはまわりくどい方法かもしれないと思っているので、ほかに何かアイデアがあれば、合わせて頂きたいです。よろしくお願いします。

kei344

2017/01/15 15:30

具体的にHTMLおよびCSS、JavaScriptなどを質問文に追記されたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答3件

イメージ的にはこのような感じでしょうか。

HTML
1<html lang="ja">
2<head>
3    <meta charset="UTF-8">
4    <title>タイトル</title>
5</head>
6<body>
7<form>
8    <label>
9        <input type="checkbox" class="check" value="text1">A
10    </label>
11    <label>
12        <input type="checkbox" class="check" value="text2">B
13    </label>
14    <label>
15        <input type="checkbox" class="check" value="text3">C
16    </label>
17
18    <input type="button" id="button1" value="クリック">
19</form>
20<hr>
21<div id="box1">
22    <ul>
23
24    </ul>
25</div>
26<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
27<script>
28    $(document).ready(function () {
29        $("#button1").on("click", function () {
30            $("#box1 ul").empty();
31            $(".check:not(:checked)").each(function () {
32                $(this).parent("label").css({"display": "none"});
33                $("#box1 ul").append("<li>" + $(this).val() + " : " + $(this).parent("label").text() + "を除外</li>");
34            });
35        });
36    });
37</script>
38</body>
39</html>

投稿2017/01/15 16:09

s8_chu

総合スコア14731

ベストアンサー

こんな感じでは？

<script>
$(function(){
  $('input[value=絞り込み]').on('click',function(){
    $('input[name="c[]"]:not(:checked)').parents('label').hide();
  });
  $('input[value=クリア]').on('click',function(){
    $('input[name="c[]"]').parents('label').show();
  });
});
</script>
<input type="button" value="絞り込み"><input type="button" value="クリア"><br>
<label for="c_1"><input type="checkbox" name="c[]" value="1" id="c_1">1</label>
<label for="c_2"><input type="checkbox" name="c[]" value="2" id="c_2">2</label>
<label for="c_3"><input type="checkbox" name="c[]" value="3" id="c_3">3</label>
<label for="c_4"><input type="checkbox" name="c[]" value="4" id="c_4">4</label>
<label for="c_5"><input type="checkbox" name="c[]" value="5" id="c_5">5</label>

投稿2017/01/16 00:37