如果选中，则更改复选框旁边的文本。 HTML + JS 或 jQuery [关闭]答案

【问题标题】：Change text next to checkbox IF checked. HTML + JS or jQuery [closed]如果选中，则更改复选框旁边的文本。 HTML + JS 或 jQuery [关闭]
【发布时间】：2013-08-27 16:29:59
【问题描述】：

我只想使用一个简单的复选框，例如，旁边带有“请检查”的复选框，然后当它被点击时，文本变为“已检查”

我一直在寻找一个简单的解决方案，但苦苦挣扎，无法弄清楚 - 尽管很简单。

有人可以帮助我吗？

【问题讨论】：

你用的是什么语言？
用什么语言？这是网页、应用程序、电子表格等吗？
对不起！使用 HTML + JS 或 jQuery。

标签： javascript jquery html checkbox

【解决方案1】：

使用 jQuery：

$('#boxid').click(function() {
  if ($(this).is(':checked')) {
    $(this).siblings('label').html('checked');
  } else {
    $(this).siblings('label').html(' not checked');
  }
});

在您的 HTML 中：

<input id="boxid" type="checkbox"><label for="boxid">not checked</label>

编辑：

工作小提琴：http://jsfiddle.net/zpzxM/

【讨论】：

谢谢！疲惫的眼睛想不通！如此简单！
@50dollanote you're welcome Important 我刚刚使用了 .click，所以如果用户使用键盘选中该框，这将不起作用，您可以使用 .change 等。
@50dollanote 很好地检查了小提琴，当我使用键盘时它也可以工作！奇怪！
我想这就是他正在寻找的答案：stackoverflow.com/questions/6293588/…

【解决方案2】：

JavaScript：

function changeText(id){

  if ($('#'+id).is(':checked')) {
    $('#'+id +"+span").html('Checked');
  }else{
    $('#'+id+ "+span").html('Please check this.');
  }
}

CSS：

<input type="checkbox" id="123" onclick="changeText(this.id);"><span>Please check this.</span>

"live Example"

【讨论】：

你也可以在选择器中使用~代替+。这也会给你同样的结果。但是对于您的情况，使用 + 是有利的，因为您只想编辑相邻的兄弟姐妹。