This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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