3

こんにちは、選択したモジュールの数が特定の値より大きいかどうかを確認する JavaScript 関数を作成しました。したがって、チェックボックスが呼び出されるたびに関数が呼び出され、関数はすべてのチェックボックスを調べて合計を計算し、それが大きいかどうかを確認します。しかし、問題は、ユーザーがチェックボックスをオンにして、合計クレジットが値よりも大きい場合、チェックボックスをchecked = falseとして設定したいことです。しかし、どのチェックボックスを元に戻すかはわかりません。javascriptで最後のクリックを元に戻す機能はありますか?

4

6 に答える 6

8

そうではありませんが、最後にクリックしたボックスを保存することで、簡単に偽装できます。このコードは逐語的には機能しないかもしれませんが、アイデアは得られます:

<script>
var last_checked_box;

function onBoxClicked( box ) {
   if ( box.checked ) last_checked_box = box;
}

function undoLastBox() {
   if ( last_checked_box ) last_checked_box.checked = false;
}
</script>

<input type="checkbox" id="box1" onClick="onBoxClicked(this)"/>
...
于 2009-03-11T12:48:46.930 に答える
6

jQueryを使用すると、次のようなことができます。

var MAX_CREDITS = 50; // just as an example
$("input[type=checkbox]").change(function (){
  var totalCredits = 0;
  $("input[type=checkbox]").each(function (){
    // augment totalCredits accordingly to each checkbox.
  });

  if(totalCredits > MAX_CREDITS){
    $(this).removeAttr("checked");
  }
});

これまでjQueryを使用したことがない場合、これは確かに目の痛みのようなものです。しかし、ご覧のとおり、これは非常に強力であり、問​​題は数行で解決できます。私はあなたがそれを学びそしてそれを試してみることをお勧めします;）

于 2009-03-11T12:49:21.000 に答える
1

これがあなたが探していた答えではないことはわかっていますが、チェックの最大数に達したときにチェックされていないチェックボックスをすべて無効にする方がユーザーエクスペリエンスが向上すると思いませんか?

于 2009-03-11T12:46:38.090 に答える
0

オブジェクトの最大数がチェックされているかどうかをテストし、trueの場合は同じ方法ですべてのチェックを削除するか、非表示のテキストボックスの値を最後にチェックしたチェックボックスのIDに設定して、再度参照できるようにすることをお勧めします。 。

于 2009-03-11T12:54:50.487 に答える
0

これは最小限ですが、完全に機能し、jQuery を使用しないソリューションです。

<script>
function isBox(element) {
    return element.form && element.form === document.forms[0] &&
        element.nodeName.toLowerCase() === 'input' &&
        element.type === 'checkbox';
}

function remaining(dR) {
    var field = document.forms[0].elements[0],
        value = +field.value;

    if(dR) return field.value = value + dR;
    else return value;
}

function listener(event) {
    var box = (event && event.target) ||
        (window.event && window.event.srcElement);

    if(isBox(box)) {
        if(box.checked) {
            if(remaining() > 0)
                remaining(-1);
            else box.checked = false;
        }
        else remaining(+1);
    }
}

if(document.addEventListener)
    document.addEventListener('click', listener, false);
else if(document.attachEvent)
    document.attachEvent('onclick', listener);
</script>
<form>
 <p>remaining: <input type="text" readonly="readonly" value="2"></p>
 <p><input type="checkbox" id="b1"><label for="b1">box1</label></p>
 <p><input type="checkbox" id="b2"><label for="b2">box2</label></p>
 <p><input type="checkbox" id="b3"><label for="b3">box3</label></p>
</form>
于 2009-03-11T13:49:39.013 に答える
0

あるとは思いませんが、最後にチェックしたボックスへの参照をいつでも保存できるので、チェックを外す必要がある場合はすぐそこにあります。

于 2009-03-11T12:47:39.663 に答える