Флажок UP text

Question

У меня есть два флажка, и когда я выбираю первый флажок, появляется «ВВЕРХ». Если я нажимаю на второй флажок, UP исчезает из первого флажка и появляется рядом со вторым флажком.

Английский не хорошо: (

$('.myCheck').click(function() {
  if ($(this).is(':checked')) {
    $(this).closest('.up-btn').show();
  }
  else {
    $(this).closest('.up-btn').hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="container">
  <input type="checkbox" class="myCheck" onclick="function()">
  <span class="up-btn" style="display:none">UP</span>
</label><br>
<label class="container">
  <input type="checkbox" class="myCheck" onclick="function()">
  <span class="up-btn" style="display:none">UP</span>
</label>

Answer 1

Решение jQuery:

$('.myCheck').click(function() {
  thisOne = this;
  $('.up-btn').hide(0);

  $('.myCheck').each(function() { 
    if (this==thisOne) {
      if ( $(this).is(':checked')) {
        $(this).next('.up-btn').show(0)
      }
    }
    else {
      $(this).prop('checked', false);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="container">
  <input type="checkbox" class="myCheck">
  <span class="up-btn" style="display:none">UP</span>
</label><br>
<label class="container">
  <input type="checkbox" class="myCheck">
  <span class="up-btn" style="display:none">UP</span>
</label>

Вы также можете сделать это только с помощью CSS (но переключатель не может быть отключен):

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}
.up-btn { display:none }
.myCheck:checked + .up-btn { display:inline }

<label class="container">
  <input type="radio" class="myCheck" name="CheckJo" >
  <span class="up-btn">UP</span>
</label><br>
<label class="container">
  <input type="radio" class="myCheck"  name="CheckJo" >
  <span class="up-btn" >UP</span>
</label>

Answer 2

Вы ищете что-то подобное?

$('.myCheck1').click(function() {
    $('.up-btn1').show();
    $('.up-btn2').hide();
    $('.myCheck2').prop('checked',false);
});

$('.myCheck2').click(function() {
    $('.up-btn2').show();
    $('.up-btn1').hide();
    $('.myCheck1').prop('checked',false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="container">
  <input type="checkbox" class="myCheck1">
  <span class="up-btn1" style="display:none">UP</span>
</label><br>
<label class="container">
  <input type="checkbox" class="myCheck2">
  <span class="up-btn2" style="display:none">UP</span>
</label>