1

ラジオ ボタンとテキスト入力フィールドを含むフォームがあります。

<input type="radio" name="foo" value="bar">
<input id="baz" type="text">
...

テキスト入力フィールドには、テキスト入力フィールドにkeyup入力を開始したときにラジオ ボタンをチェックするハンドラーが関連付けられています。

$('#baz').on('keyup', function() {
  var bar = $('input[name="foo"][value="bar"]');
  if (!bar.is(':checked')) {
    bar.prop('checked', true);
  }
});

フォームには、「リセット」ボタン ( idof付きreset) と次のclickハンドラーもあります。

$('#reset').on('click', function() {
  $('input[type="radio"]').prop('checked', false);
  $('input').val('');
});

問題: keyup[リセット] ボタンをクリックすると、入力フィールドのハンドラーが動作しなくなります。

次のような呼び出しでハンドラーを拡張するとconsole.log:

$('#baz').on('keyup', function() {
  var bar = $('input[name="foo"][value="bar"]');
  if (!bar.is(':checked')) {
    console.log('not checked');
    bar.prop('checked', true);
    console.log('New value for "checked" property: ' + bar.prop('checked'));
  } else {
    console.log('checked');
  }
});

「リセット」ボタンをクリックする前に2文字を入力すると、次の出力が得られます。

未検査

"checked" プロパティの新しい値: true"

チェック済み

「リセット」ボタンをクリックした後に 2 文字を入力すると、出力は次のようになります。

未検査

「checked」プロパティの新しい値: undefined

未検査

「checked」プロパティの新しい値: undefined

checkedラジオ ボタンのプロパティが に変わりましundefinedたfalse。keyup(それが、ハンドラーがそれを設定できなくなった理由だと思いますか?)

ここで何が起こっているのか理解したいです。[リセット] をクリックした後もハンドラーの機能を保持するには、コードをどのように変更する必要がありkeyupますか?

明らかな何かが欠けているように感じますが、これまでのところ、この問題の解決策をここまたは他の場所で掘り下げることができませんでした.

4

1 に答える 1

1

#resetイベント ハンドラvalueで、すべての入力要素を に設定しています''。

ハンドラーでは、 andkeyupを使用してラジオ ボタンを選択しています。namevalue

var bar = $('input[name="foo"][value="bar"]');

あなたはもう持っていないので、何も選択しませんinput[value="bar"]

于 2014-07-04T12:07:21.200 に答える