Измените имя метки флажка, если она открыта

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

Когда вы запрашиваете решение 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>

Answer 2

Предполагая, что вы хотите использовать чистое решение 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/

Answer 3

Добро пожаловать. Ты на правильном пути. Я добавил класс на ваш лейбл и сослался на него в вашем 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");
      }
    });

Answer 4

Это желаемый выход или обратный?

$("#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>

Answer 5

В 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>