ページと送信ボタンにいくつかのチェックボックスがあります(一部はhtmlのchecked属性ですでにチェックされています)。jquery を使用して $.each() ループを使用して関数を実行し、チェックボックスがオンになっている場合に関数を実行しますが、まだチェックされていない場合にのみ実行します。また、チェックされていないチェックボックスごとに機能を実行したいのですが、それがすでにチェックされている場合に限ります。
助けてください
これを行う 1 つの方法は.data()
、チェックボックスの元の値を保存するために使用することです。
$(document).ready(function(){
$("input[type='checkbox']").each(function(){
$(this).data("originalValue", $(this).is(":checked"));
})
});;
$("#ok").click(function(){
$("input[type='checkbox']").each(function(){
var edited = $(this).data("originalValue") !== $(this).is(":checked");
if (edited)
{
var checkboxLabel = $(this).next("label");
alert("edited: " + checkboxLabel.text());
}
});
});
変更ではなくユーザーの操作をチェックする元のソリューション: http://jsfiddle.net/8g3uz/1/
最初にチェックされていなかったチェックボックスのみに対応するには、次のことをお勧めします。
$('#check').click(
function(e){
e.preventDefault();
var checkboxes = $('input:checkbox:checked');
checkboxes.each(
function(i){
if (this.defaultChecked == false) {
// do something, it wasn't checked on page-load, eg:
alert("This is a checkbox that wasn't originally checked.");
}
});
});
状態がデフォルトから変更された場合に何かを行うには、これが質問の基礎となるようです。
$('#check').click(
function(e){
e.preventDefault();
var checkboxes = $('input:checkbox');
checkboxes.each(
function(){
if (this.defaultChecked !== this.checked) {
$(this).prev('label').addClass('changedFromDefault');
}
});
});
次のHTMLを使用します。
<span>
<label for="one">one</label><input id="one" type="checkbox" checked />
</span>
<span>
<label for="two">two</label><input id="two" type="checkbox" />
</span>
<span>
<label for="three">three</label><input id="three" type="checkbox" />
</span>
<button id="check">Check</button>
このjQueryは、変更または変更されていない要素をより簡単に識別する方法を示す必要があります。
$('#check').click(
function(e){
e.preventDefault();
var checkboxes = $('input:checkbox');
checkboxes.each(
function(){
if (this.defaultChecked !== this.checked) {
$(this)
.closest('span')
.removeClass('unchanged')
.addClass('changedFromDefault');
}
else {
$(this)
.closest('span')
.removeClass('changedFromDefault')
.addClass('unchanged');
}
});
});
参照:
最初のケースのセレクターは次のとおりです。
$("input[type='checkbox']:not([checked]):checked");
2 番目のケースのセレクターを次に示します。
$("input[type='checkbox'][checked]:not(:checked)");