0

私は次のhtmlを持っています:

<input type="checkbox" name="email" /> Email

私のコードの他の場所で、このチェックボックスを変更して説明を確認し、次のように変更する必要があります。

<input type="checkbox" name="email" checked /> Email (enabled)

私はもう試した：

  $('input[name=email]').val('test');

しかし、それはテキストを変更しません。チェックマークを付けてテキストを変更するにはどうすればよいですか?

4

4 に答える 4

1

あなたのシナリオでは、label要素を使用する方が適切だと思うので、次のようになります。

<label name="email" for="email">Email</label>
<input type="checkbox" name="email" id="email" checked />

これにより、ラベルをクリックしてチェックボックスを切り替えるオプションが追加されます。テキストを変更するjqueryは次のとおりです。

$("label[name=email]").text("Email (enabled)");

デモ用のフィドルは次のとおりです: http://jsfiddle.net/DVEuq/

于 2013-08-24T16:34:37.660 に答える
0

labelチェックボックスのテキスト ラベルに要素を使用し、 .propjQuery メソッドを使用してチェック状態を切り替えることができます。

<input type='checkbox' id='emailcheckbox' name='email' />
<label for='emailcheckbox'></label>

<script>
$('#emailcheckbox').prop('checked', true);
$('label[for=emailcheckbox]').text('Email');
</script>
于 2013-08-24T16:57:26.493 に答える
0

CSSのみを使用するソリューションは次のとおりです。

<input type='checkbox' name='email' aria-label='Email'><span>Email</span>

input[name='email']:checked + span::after {
  content: ' (enabled)'
}

'Email' の周りに '' を追加し、隣接する兄弟セレクターを使用して css3 でターゲットにし、 :checked 疑似セレクターが で入力でアクティブな場合に::afterコンテンツを追加します。name='email'

aria-label入力には属性があることに注意してください。これにより、視覚障害者向けの支援技術が入力の意味を識別するように指示されます。

于 2013-08-24T16:51:29.793 に答える