Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<style scoped>
span {
color: blue;
font-weight: bold;
<input type="checkbox" id="checkbox1" checked>
<label for="checkbox1">チェックボックス</label>
<br />
<button type="button" id="attr_btn">変更</button>
$(xxx).attr('checked'): <span id="attr_val"></span>
<button type="button" id="checked_btn">変更</button>
HTMLInputElement.checked: <span id="checked_val" ></span>
<button type="button" id="prop_btn">変更</button>
$(xxx).prop('checked'): <span id="prop_val" ></span>
<button type="button" disabled>変更</button>
$(xxx).is(':checked'): <span id="is_val" />
<!-- jQuery from CDN -->
$(function () {
// チェックボックスの状態変更にラベルを更新
$('#checkbox1').change(function (e) {
const target = e.currentTarget;
const $target = $(target);
var a = $target.attr('checked');
.change(); // 初期表示のための実行
// 変更ボタン
$('#attr_btn').click(function (e) {
// この処理は動作しません
const val = $('#checkbox1').attr('checked');
const newval = val === undefined ? 'checked': undefined;
$('#checkbox1').attr('checked', newval);
$('#checkbox1').change(); // 表示更新
$('#checked_btn').click(function (e) {
const cb = document.getElementById('checkbox1');
const val = cb.checked;
cb.checked = !val;
$('#checkbox1').change(); // 表示更新
$('#prop_btn').click(function (e) {
const val = $('#checkbox1').prop('checked');
$('#checkbox1').prop('checked', !val);
$('#checkbox1').change(); // 表示更新
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment