Javascript 如果复选框标签处于打开状态，请更改其名称

您好，我想根据复选框的状态更改其名称。我想让它说打开它，盒子没有被选中，如果盒子被选中则关闭。我尝试了下面的JS，但它不起作用

我的html

    <div class="box">
      <h3 class="name">Jon Do</h3>
      <p class="title">smaple title</p>
      <input type="checkbox" name="tabs" id="tab-one">
      <label for="tab-one">open</label>
      <div class="teamBio">
        <p>content</p>
      </div>
    </div>

---

在jQuery中，您可以使用

$。is（':checked'）

或

$。prop（'checked'）

，

。checked

是香草js，如果您使用

$（'.\tab one'）[0]，则可以使用它。选中了
。此外，您的标签没有
class=“tab one”
，因此您需要添加它，或者将
$（'.tab one'）
更改为
$（'[for=“tab one”]'）

您可能希望这样做：


$（'#tab one'）。在（'change'，function（）上{
if（$（this.prop（'checked'））{
$（“.tab一”）.text（“关闭”）；
}否则{
$（“.tab一”）.text（“打开”）；
}
})

乔恩·多
s简单标题
打开
内容

在jQuery中，您可以使用
$.is（':checked'）
或
$.prop（'checked'）
，
.checked
是香草js，如果您使用
$（'.\tab one'）[0]，则可以使用它。选中了
。此外，您的标签没有
class=“tab one”
，因此您需要添加它，或者将
$（'.tab one'）
更改为
$（'[for=“tab one”]'）

您可能希望这样做：


$（'#tab one'）。在（'change'，function（）上{
if（$（this.prop（'checked'））{
$（“.tab一”）.text（“关闭”）；
}否则{
$（“.tab一”）.text（“打开”）；
}
})

乔恩·多
s简单标题
打开
内容

欢迎光临。你在正确的轨道上。我在标签中添加了一个类，并在JS中引用了它。您的JS中也有一些错误，您不能说
if（$（“#tab one”）。已选中
等。请参见以下内容：

HTML:

欢迎。你的思路是正确的。我在你的标签中添加了一个类，并在你的JS中引用了它。你的JS中也有一些错误，你不能说
if（$（“#tab one”）。选中了
等。请参见以下内容：

HTML:

这是期望的输出，还是相反的输出


$（“#表一”）.change（函数（）{
var label=“打开”；
if（$（this.prop（'checked'））
label=“close”；
$（'label[for=“tab one”]”）。文本（标签）；
})；

乔恩·多
s简单标题
打开
内容

这是所需的输出，还是反向输出


$（“#表一”）.change（函数（）{
var label=“打开”；
if（$（this.prop（'checked'））
label=“close”；
$（'label[for=“tab one”]”）。文本（标签）；
})；

乔恩·多
s简单标题
打开
内容

假设您想要纯javascript解决方案，您可以在复选框中添加一个事件侦听器，并使用
textContent
进行如下更新：


const checkBox=document.getElementById（'tab-one'）；
const label=document.querySelector（'label'）；
函数toggleText（）{
如果（选中此项）{
label.textContent='open'；
}否则{
label.textContent='close'；
}
}
复选框。addEventListener（'单击'，切换文本）；

乔恩·多
s简单标题
关闭
内容

假设您想要纯javascript解决方案，您可以在复选框中添加一个事件侦听器，并使用
textContent
进行如下更新：


const checkBox=document.getElementById（'tab-one'）；
const label=document.querySelector（'label'）；
函数toggleText（）{
如果（选中此项）{
label.textContent='open'；
}否则{
label.textContent='close'；
}
}
复选框。addEventListener（'单击'，切换文本）；

乔恩·多
s简单标题
关闭
内容

当您要求使用JavaScript或jQuery解决方案时，需要指出的是，使用HTML和CSS是可行的：

// setting the default state for the .teamBio
// element's display, for when the checkbox
// is unchecked:
#tab-one~.teamBio {
  display: none;
}

// setting the display of the .teamBio
// element's display for when the checkbox
// is checked; using the ':checked' UI
// element pseudo-class:
#tab-one:checked~.teamBio {
  display: block;
}

// Using the '::before' pseudo-element, with
// CSS generated content, to set text for the
// checkbox's next-sibling ('+') <label>
// element:
#tab-one+label::before {
  content: 'Open';
}

// setting the generated content of the <label>
// for when the checkbox element is checked:
#tab-one:checked+label::before {
  content: 'Close';
}


乔恩·多
示例标题
内容

当您要求使用JavaScript或jQuery解决方案时，需要指出的是，使用HTML和CSS是可行的：

// setting the default state for the .teamBio
// element's display, for when the checkbox
// is unchecked:
#tab-one~.teamBio {
  display: none;
}

// setting the display of the .teamBio
// element's display for when the checkbox
// is checked; using the ':checked' UI
// element pseudo-class:
#tab-one:checked~.teamBio {
  display: block;
}

// Using the '::before' pseudo-element, with
// CSS generated content, to set text for the
// checkbox's next-sibling ('+') <label>
// element:
#tab-one+label::before {
  content: 'Open';
}

// setting the generated content of the <label>
// for when the checkbox element is checked:
#tab-one:checked+label::before {
  content: 'Close';
}


乔恩·多
示例标题
内容

@p0rk不客气。作为参考，下面给出的其他答案也会起作用，除非他们单击复选框，只有在单击标签时才起作用。@dave你是对的。我假设他隐藏了复选框，并使用标签作为触发器来显示/隐藏
div.teamBio
。我想我不应该这样假设@p0rk不客气。作为参考，下面给出的其他答案也会起作用，除非他们单击复选框，只有在单击标签时才起作用。@dave你是对的。我以为他隐藏了复选框，并使用标签作为触发器来显示/隐藏
div.teamBio
。我想我不应该这样假设。你应该在问题中添加“jQuery”标记，因为您正在寻找此问题的jQuery解决方案。答案中也有纯javascript解决方案。您应该在问题中添加“jQuery”标记，因为您正在寻找此问题的jQuery解决方案。答案中也有纯javascript解决方案。
   var trigger = $('.trigger');

    trigger.click(function(){
      $(this).toggleClass("selected");
      if ($(this).hasClass("selected")) {
        $(this).text("Close");
      } else {
        $(this).text("Open");
      }
    });

// setting the default state for the .teamBio
// element's display, for when the checkbox
// is unchecked:
#tab-one~.teamBio {
  display: none;
}

// setting the display of the .teamBio
// element's display for when the checkbox
// is checked; using the ':checked' UI
// element pseudo-class:
#tab-one:checked~.teamBio {
  display: block;
}

// Using the '::before' pseudo-element, with
// CSS generated content, to set text for the
// checkbox's next-sibling ('+') <label>
// element:
#tab-one+label::before {
  content: 'Open';
}

// setting the generated content of the <label>
// for when the checkbox element is checked:
#tab-one:checked+label::before {
  content: 'Close';
}