jQueryでチェックボックス（cheked）を取得・判定・外し方

チェックボックスの判定をするjQueryと、チェックボックスの取得、外し方も一緒にご紹介します。
まずは判定、取得、チェックを外すボタンの全部入ったデモをどうぞ！

DEMO

あなたの好きな麺は？

HTML

<div class="demo1">
  <p>あなたの好きな麺は？</p>
  <form>
    <ul>
      <li>
        <label><input type="checkbox" >蕎麦</label>
      </li>
      <li>
        <label><input type="checkbox" >スパゲッティ</label>
      </li>
      <li>
        <label><input type="checkbox" >吉牛</label>
      </li>
    </ul>
    <div class="checker">
      <span>全てチェック</span><span>全て外す</span>
    </div>
    <div class="btn">GO!</div>
  </form>
</div>

CSS

.demo1 {
  border: 1px solid #515151;
  border-radius: 12px;
  padding: 8% 4%;
  margin: 4% 0;
  width: 94%;
  max-width: 400px;
  min-width: 288px;
  text-align: center;
}
.demo1 p {
  font-size: 26px;
  font-weight: bold;
  margin-top: 0;
  line-height: 1.3;
}
.demo1 ul {
  padding: 0 !important;
}
.demo1 li {
  font-size: 20px;
  text-align: left;
  padding-left: 4%;
  width: 259px;
  display: block;
  border-bottom: 1px solid #d2cece;
  margin: 0 auto 6px !important;
}
.demo1 li label {
  display: block;
  padding-bottom: 6px;
}
.checker {
  width: 100%;
  display: block;
  margin: 6% auto;
}
.checker span {
  display: inline-block;
  margin: 0 6px;
  padding: 6px 15px;
  font-size: 16px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.checker span:nth-of-type(1) {
  background: #00c6b9;
}
.checker span:nth-of-type(2) {
  background: #777777;
}
.demo1 .btn {
  display: block;
  padding: 10px 24px;
  background: #00c6b9;
  color: #fff;
  border-radius: 6px;
  width: 259px;
  min-width: 120px;
  font-size: 26px;
  font-weight: bold;
  margin: 6% auto 0;
  cursor: pointer;
}

jQuery

$(".checker span").eq(0).on("click", function() {
  $(".demo1 li input").attr("checked", true).prop("checked", true).change();
});
$(".checker span").eq(1).on("click", function(){
  $(".demo1 li input").removeAttr("checked").prop("checked", false).change();
});
var txt;
$(".demo1 .btn").on("click", function() {
  if($(".demo1 li").eq(0).find("input").prop("checked") && $(".demo1 li").eq(1).find("input").prop("checked") && $(".demo1 li").eq(2).find("input").prop("checked")) {
    txt = "全部選んじゃったか。。。。"
  } else if($(".demo1 li").eq(0).find("input").prop("checked") && $(".demo1 li").eq(1).find("input").prop("checked")) {
    txt = "蕎麦もスパゲッティも美味しいよね～！"
  } else if($(".demo1 li").eq(0).find("input").prop("checked") && $(".demo1 li").eq(2).find("input").prop("checked")) {
    txt = "蕎麦は麺だけど、吉牛は、食べたいよね～。"
  } else if($(".demo1 li").eq(1).find("input").prop("checked") && $(".demo1 li").eq(2).find("input").prop("checked")) {
    txt = "スパゲッティは麺だけど、吉牛は、食べたいよね～。"
  } else if($(".demo1 li").eq(0).find("input").prop("checked")) {
    txt = "蕎麦美味しいよねぇ。"
  } else if($(".demo1 li").eq(1).find("input").prop("checked")) {
    txt = "スパゲッティ美味しいよねぇ。"
  } else if($(".demo1 li").eq(2).find("input").prop("checked")) {
    txt = "麺じゃなくても吉牛は食いたい。"
  } else {
    txt = "選んで欲しいな。"
  }
  alert(txt);
  $(".demo1 li input").removeAttr("checked").prop("checked", false).change();
});

初めての目次

チェックボックスの状態を取得・判定
チェック状態にする
チェック状態を解除

チェックボックスの状態を取得・判定

チェックボックスの状態判定には「.prop(“checked”)」を利用します。
目的の要素がチェックされていたら、処理を実行できます。

if($("input[name='checkbox1']").prop("checked")) {
  // 「input[name='checkbox1']」にチェックが有る時の処理
} else {
  // 「input[name='checkbox1']」にチェックが無い時の処理
}

チェック状態にする

チェックボックス全てにチェックを入れる場合、チェックを入れたい要素に対して「.attr(“checked”, true).prop(“checked”, true).change()」を利用します。

$("input[name='checkbox1']").attr("checked", true).prop("checked", true).change();

チェック状態を解除

チェックボックス全てのチェックを解除する場合、チェックを解除したい要素に対して「.removeAttr(“checked”).prop(“checked”, false).change()」を利用します。

$("input[name='checkbox1']").removeAttr("checked").prop("checked", false).change();