javascript - 如果打开，更改复选框标签的名称

Question

您好，我想根据复选框的状态更改它的名称。我想让它说打开它未选中该框，如果选中该框则关闭。我试过下面的 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>

我的javascript

if($("#tab-one").checked {
  $(".tab-one").text("close");
  else {
  $(".tab-one").text("open");
  }
})

Answer 1

欢迎。你走在正确的轨道上。我在你的标签中添加了一个类，并在你的 JS 中引用了它。你的 JS 也有一些错误，你不能说 if($("#tab-one").checked 等。见下文:

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" class="trigger">Open</label>
      <div class="teamBio">
        <p>content</p>
      </div>
    </div> 

JS:

   var trigger = $('.trigger');

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