如果复选框标签打开，则更改其名称答案

【问题标题】：Change name of checkbox label if its open如果复选框标签打开，则更改其名称
【发布时间】：2018-05-09 23:45:01
【问题描述】：

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

【问题讨论】：

您应该在问题中添加“jQuery”标签，因为您正在寻找 jQuery 解决方案。无论如何，答案中也有纯 JavaScript 解决方案。

标签： javascript jquery html css checkbox

【解决方案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");
      }
    });

【讨论】：

@p0rk 不客气。作为参考，下面给出的其他答案也可以使用
除非他们点击复选框，除非他们点击标签。
@dave 你是对的。我以为他隐藏了复选框，并使用标签作为触发器来显示/隐藏div.teamBio。我想我不应该假设这个。

【解决方案2】：

在 jQuery 中，您可以使用 $.is(':checked') 或 $.prop('checked')，.checked 是 vanilla js，如果您使用 $('#tab-one')[0].checked，您可以使用它。另外，您的标签没有class="tab-one"，因此您需要添加它，或者将您的$('.tab-one') 更改为$('[for="tab-one"]')。

您可能希望这样做：

$('#tab-one').on('change', function() {
    if ($(this).prop('checked')) {
        $(".tab-one").text("close");
    } else {
        $(".tab-one").text("open");
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
      <h3 class="name">Jon Do</h3>
      <p class="title">smaple title</p>
      <input type="checkbox" name="tabs" id="tab-one">
      <label class="tab-one" for="tab-one">open</label>
      <div class="teamBio">
        <p>content</p>
      </div>
    </div>

【讨论】：

【解决方案3】：

这是想要的输出，还是相反的？

$("#tab-one").change(function(){
  var label = "open";
  if ($(this).prop('checked'))
     label = "close";
  $('label[for="tab-one"]').text(label);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案4】：

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

const checkBox = document.getElementById('tab-one');
const label = document.querySelector('label');

function toggleText(){
	if (this.checked){
  	label.textContent = 'open';
  } else {
  	label.textContent = 'close';
  }

}

checkBox.addEventListener('click', toggleText);

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

jsFiddle: https://jsfiddle.net/AndrewL64/gpLm7487/

【讨论】：

【解决方案5】：

当您要求使用 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';
}

#tab-one~.teamBio {
  display: none;
}

#tab-one:checked~.teamBio {
  display: block;
}

#tab-one+label::before {
  content: 'Open';
}

#tab-one:checked+label::before {
  content: 'Close';
}

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

【讨论】：