0

ここにいくつかのhtmlがあります：

<form>
    <input type="checkbox" id="check-123" />
    <input type="text" id="text-123" onchange="doSomething('123')" />
</form>

そして、ここにいくつかのJavaScriptがあります：

function doSomething(key)
{
    var textbox = $('#text-'+key);
    var checkbox = $('#check-'+key);
    checkbox.attr('checked',(textbox.val()!="") );
}

ここでの私の目標は、テキスト ボックスに値があるときはいつでもチェックボックスをオンにし、その値が削除されたらオフにすることです。これはhtmlで正常に機能しているように見えますが（checked="checked"チェックボックスに追加されていることがわかります）、チェックボックスはテキストボックスに最初に何かが入力されたときにのみチェックされます。

checked="checked"html にチェックボックスが追加されていても、チェックボックスがオフになっているのはなぜですか?

4

3 に答える 3

6

属性ではなく要素のプロパティを使用して、javascript を介して状態を変更します

checkbox.prop('checked',(textbox.val()!="") );

.attr()および.prop( )に関する jQuery ドキュメントから:

jQuery 1.6 以降、.attr() メソッドは、設定されていない属性に対して undefined を返します。フォーム要素のチェック状態、選択状態、無効状態などの DOM プロパティを取得および変更するには、.prop() メソッドを使用します。

重点はjQuery独自のものです。チェックボックスの現在の状態を反映して制御するのは、checkedプロパティのみです。チェックボックスの状態を制御するために、 checked属性を使用しないでください。

于 2013-06-17T23:10:37.743 に答える
2

IE8以下でchecked属性を使った面白いものを見てきました。場合によっては、プロパティと属性の両方を設定する必要がありましたが、最新のブラウザーはプロパティを調整するだけで問題ないように見えます。

checkbox.prop('checked',textbox.val()!="");//property

以下は、ブラウザー関連の不一致に遭遇した場合にのみ必要です。

if(textbox.val()!="") 
{
    checkbox.attr('checked','checked');
}
else
{
    checkbox.removeAttr('checked');
}
于 2013-06-17T23:12:53.323 に答える
2

次のようなものを検討してください。

function doSomething(el) {
    el.form['check-' + el.name.split('-')[1]].checked = !!el.value;
}


<form>
    <input type="checkbox" name="check-123">
    <input type="text" name="text-123" onchange="doSomething(this)">
</form>
于 2013-06-17T23:18:18.270 に答える