nextdoorwith/checkbox-test.html

## checkbox-test.html
<html>
<head></head>
<body>

<style scoped>
    span {
        color: blue;
        font-weight: bold;
    }
</style>

<form>
    <div>
        <input type="checkbox" id="checkbox1" checked>
        <label for="checkbox1">チェックボックス</label>
    </div>
    <br />
    <div>
        <button type="button" id="attr_btn">変更</button>
        $(xxx).attr('checked'): <span id="attr_val"></span>
    </div>
    <div>
        <button type="button" id="checked_btn">変更</button>
        HTMLInputElement.checked: <span id="checked_val" ></span>
    </div>
    <div>
        <button type="button" id="prop_btn">変更</button>
        $(xxx).prop('checked'): <span id="prop_val" ></span>
    </div>
    <div>
        <button type="button" disabled>変更</button>
        $(xxx).is(':checked'): <span id="is_val" />
    </div>
</form>

<!-- jQuery from CDN -->
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<script>
$(function () {
    // チェックボックスの状態変更にラベルを更新
    $('#checkbox1').change(function (e) {
        const target = e.currentTarget;
        const $target = $(target);
        var a = $target.attr('checked');
        $('#attr_val').text($target.attr('checked'));
        $('#checked_val').text(target.checked);
        $('#prop_val').text($target.prop('checked'));
        $('#is_val').text($target.is(':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(); // 表示更新
    });
});
</script>

</body>
</html>
	<html>
	<head></head>
	<body>

	<style scoped>
	span {
	color: blue;
	font-weight: bold;
	}
	</style>

	<form>
	<div>
	<input type="checkbox" id="checkbox1" checked>
	<label for="checkbox1">チェックボックス</label>
	</div>
	<br />
	<div>
	<button type="button" id="attr_btn">変更</button>
	$(xxx).attr('checked'): <span id="attr_val"></span>
	</div>
	<div>
	<button type="button" id="checked_btn">変更</button>
	HTMLInputElement.checked: <span id="checked_val" ></span>
	</div>
	<div>
	<button type="button" id="prop_btn">変更</button>
	$(xxx).prop('checked'): <span id="prop_val" ></span>
	</div>
	<div>
	<button type="button" disabled>変更</button>
	$(xxx).is(':checked'): <span id="is_val" />
	</div>
	</form>

	<!-- jQuery from CDN -->
	<script
	src="https://code.jquery.com/jquery-3.6.0.js"
	integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
	crossorigin="anonymous"></script>

	<script>
	$(function () {
	// チェックボックスの状態変更にラベルを更新
	$('#checkbox1').change(function (e) {
	const target = e.currentTarget;
	const $target = $(target);
	var a = $target.attr('checked');
	$('#attr_val').text($target.attr('checked'));
	$('#checked_val').text(target.checked);
	$('#prop_val').text($target.prop('checked'));
	$('#is_val').text($target.is(':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(); // 表示更新
	});
	});
	</script>

	</body>
	</html>