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

jQueryでチェックボックス(cheked)を取得・判定・外し方 javascript
この記事は約7分で読めます。
スポンサーリンク

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

DEMO

あなたの好きな麺は?

全てチェック全て外す
GO!

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();
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました