Question

我有以下html：

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

在我的代码中，我需要更改此复选框以检查并更改说明，如下所示：

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

我试过了：

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

但这不会改变文字。如何选中标记并更改文本？

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)'
}

在'电子邮件'周围添加''，并使用带有adjacent sibling selector的css3进行定位，并在输入name='email' ::after时添加:checked pseudoselector内容aria-label }。

请注意，输入中有{{1}}个属性。这指示盲人的辅助技术识别输入意义。

Answer 4

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

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

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

在复选框输入后立即更改文本

4 个答案: