Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment