jquery - Change text immediately following a checkbox input

Question

I have the following html:

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

Elsewhere in my code, I need to change this checkbox to check and also change the description, like so:

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

I've tried:

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

But that doesn't change the text. How do I mark it checked and also change the text?

Answer 1

改变：

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

至：

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

你的代码是：

$('input[name=email]').prop('checked',true).next('span').html('Email (enabled)');

Answer 2

我认为对于您的场景，使用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/

Answer 3

这是一个仅使用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输入上有一个属性。这指导盲人识别输入含义的辅助技术。

Answer 4

您可以使用该label元素作为复选框的文本标签，并使用.propjQuery 方法来切换选中状态。

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

<script>
$('#emailcheckbox').prop('checked', true);
$('label[for=emailcheckbox]').text('Email');
</script>