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

Posted 2023-03-05

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

【英文标题】：Change text next to checkbox IF checked. HTML + JS or jQuery [closed]

【发布时间】：2013-08-27 16:29:59

【问题描述】：

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

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

有人可以帮助我吗？

【问题讨论】：

你用的是什么语言？

用什么语言？这是网页、应用程序、电子表格等吗？

对不起！使用 html + JS 或 jQuery。

【参考方案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 很好地检查了小提琴，当我使用键盘时它也可以工作！奇怪！

我想这就是他正在寻找的答案：***.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"

【讨论】：

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