私のページにはいくつかの入力テキストフィールドがあり、JavaScriptを使ってその値を表示しています。
.set("value","")`という関数を使って、値の編集、チェックボックスフィールドの追加、値の受け渡しを行っています。
ここでは、value == 1
であれば、このチェックボックスがチェックされるべきであることを確認したいと思います。それ以外の場合は、チェックされていない状態にします。
私は2つのdivを使ってこれを行いましたが、これでは気が済まないので、他の解決策はありませんか?
if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
**jQuery 1.6+の場合:***。
.attr()は、プロパティに対しては非推奨です。
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
**jQuery < 1.6の場合:***。
チェックボックスのチェック/アンチェックを行うには、属性 checked
を使用し、それを変更します。jQueryではこうなります。
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
HTMLでは、次のようになります。
<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->
しかし、チェックボックスの値を取得するための .attr() メソッドは信頼できません(必要な場合)。.prop()]1メソッドに頼らなければなりません。
jQuery 1.6以前は、[.attr()][2]メソッドが一部の属性を取得する際にプロパティ値を考慮することがあり、一貫性のない動作を引き起こす可能性があったため、このためにprop()を使用することができます。jQuery 1.6**では、.prop()
メソッドはプロパティ値を明示的に取得する方法を提供し、.attr()
は属性を取得します。
var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);
または単に
$('#checkbox').prop('checked',(value == 1));
[2]: http://api.jquery.com/attr
**スニペット
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
chkbox.prop('checked', this.value==1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">