2022年12月17日 / 最終更新日時 : 2022年12月17日 info@rishuntrading.co.jp

jQueryでチェックボックスのchecked属性を操作

JQueryでチェックボックスのchecked属性を操作する際の注意事項。
JQueryでチェックボックスを操作する際に、.propを使って実装していたのですが、チェックボックスのオン・オフの表示はうまくいくものの、チェックボックスにchecked属性を付ける事ができませんでした。
今回は、その解決方法です。

残念ながら、jQueryでチェックボックスの操作や値を取得するのに、属性を操作する.attr()を使っても、.checked属性の取得や操作はできません。
チェックしてもchecked属性が付かなかったり、ブラウザが反応しなかった場合も考慮して、jQueryオブジェクトの.prop()と、change()を併用して実現します。

.prop()は、jQueryオブジェクトのプロパティです。.attr()と似ていますが、HTMLタグの属性を扱うわけではないので、使い方が異なります。
後からチェックを入れてもHTML上のチェックボックスには、check属性が付かない場合があるため、チェック有無を調べるには、.prop()を利用します。

1.チェックボックスの値を取得する。
2.チェックを入れる・チェックを外す
- チェックを入れる
- チェックを外す
3.実際の例(サンプル)

1.チェックボックスの値を取得する。

var $check = jQuery('input[type="checkbox"]').prop("checked");
if($check){
	alert('チェックを外す処理を実施する。');
}
else{
	alert('チェックを付ける処理を実施する。');
}

var $check = jQuery('input[type="checkbox"]').prop("checked");

if($check){

alert('チェックを外す処理を実施する。');

}

else{

alert('チェックを付ける処理を実施する。');

}

値を取得するだけなら、.prop()が利用できます。

2.チェックを入れる・チェックを外す

チェックを入れる

jQuery('input[type="checkbox"]').attr('checked', true).prop('checked', true).change();

1	jQuery('input[type="checkbox"]').attr('checked', true).prop('checked', true).change();

チェックを外す

jQuery('input[type="checkbox"]').removeAttr('checked').prop("checked", false).change();

1	jQuery('input[type="checkbox"]').removeAttr('checked').prop("checked", false).change();

JavaScriptでチェックボックスを動的に操作した場合、ブラウザのUIが反応しない事があります。
そのため、.change()で強制的にイベントを発生させ表示するようにしています。

また、チェック状態の変更の際には.attr()でchecked属性の追加／削除も合わせて行なっておけば、トラブルを起こしにくくなります。
チェックを外す場合は.removeAttr(‘checked’)で属性を削除するようにしておきます。

3.実際の例(サンプル)

HTML文

<div class="check_tag">
  <div>
    <input type="checkbox" id="10s" name="10s" value="10s">
    <span class="hash_text" style="background: transparent; color: rgb(51, 51, 51);">#10代</span>
  </div>
　<div>
　　<input type="checkbox" id="20s" name="20s" value="20s">
　　<span class="hash_text">#20代</span>
  </div>
  <div>
　　<input type="checkbox" id="30s" name="30s" value="30s"><span class="hash_text">#30代</span>
  </div>
  <div>
    <input type="checkbox" id="40s" name="40s" value="40s"><span class="hash_text">#40代</span>
  </div>
  <div><input type="checkbox" id="50s" name="50s" value="50s"><span class="hash_text">#50代</span>
  </div>
  <div><input type="checkbox" id="60s" name="60s" value="60s"><span class="hash_text">#60代</span>
  </div>
</div>

<div>

</div>

　<div>

</div>

<div>

</div>

<div>

</div>

</div>

</div>

jQuery(OKの時)

jQuery('.check_tag>div').on('click', function() {
    $check = jQuery(this).children('input[type="checkbox"]').prop("checked");
    if($check){
        jQuery(this).children('input[type="checkbox"]').removeAttr('checked').prop("checked", false).change();
        jQuery(this).children('.hash_text').css({
            'background':'transparent',
            'color':'#333333'
        });
    }
    else{
        jQuery(this).children('input[type="checkbox"]').attr('checked', true).prop("checked", true).change();
        jQuery(this).children('.hash_text').css({
            'background':'#c0a171',
            'color':'#ffffff'
        });
    }
});

jQuery('.check_tag>div').on('click', function() {

$check = jQuery(this).children('input[type="checkbox"]').prop("checked");

if($check){

jQuery(this).children('input[type="checkbox"]').removeAttr('checked').prop("checked", false).change();

jQuery(this).children('.hash_text').css({

'background':'transparent',

'color':'#333333'

});

}

else{

jQuery(this).children('input[type="checkbox"]').attr('checked', true).prop("checked", true).change();

jQuery(this).children('.hash_text').css({

'background':'#c0a171',

'color':'#ffffff'

});

}

});

jQuery(NGの時):input[type=”checkbox”]にchecked属性が付かない。

jQuery('.check_tag>div').on('click', function() {
    $check = jQuery(this).children('input[type="checkbox"]').prop("checked");
    if($check){
        jQuery(this).children('input[type="checkbox"]').prop("checked", false);
        jQuery(this).children('.hash_text').css({
            'background':'transparent',
            'color':'#333333'
        });
    }
    else{
        jQuery(this).children('input[type="checkbox"]').prop("checked", true);
        jQuery(this).children('.hash_text').css({
            'background':'#c0a171',
            'color':'#ffffff'
        });
    }
});