Флажок CSS, как сделать элемент непроверенным, только если установлен другой флажок

ProgramBox

Флажок CSS, как сделать элемент непроверенным, только если установлен другой флажок

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь создать какое-то слайд-шоу на основе CSS Checkbox . Таким образом, соответствующие данные видны при нажатии его кнопки. Но проблема в том, что данные исчезают при повторном нажатии кнопки. Я хочу сделать это таким образом, чтобы при нажатии кнопки и отображении ее данных они исчезали только при нажатии другой кнопки. Таким образом, он не будет включен и выключен, а включен, если не нажата другая кнопка.

Вот ДЕМОНСТРАЦИЯ

 $.fn.MP = function(options) {
  var settings = $.extend({
    // These are the defaults
    text: ""
  }, options);

  $(this).on("click tap", "input", function() {
    $(this).parent().siblings().find("input").prop("checked", false);
  });
};

// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
    var $panel = $(el);
    var panelId = $panel.attr('id');
    var $panelBottom = $('div.panelBottom', $panel);

    $('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
        var $input = $(elInput);
        var inputId = panelId   '-box-'   indexInput;

        $input.attr('id', inputId);
        $('label:nth('   indexInput   ')', $panelBottom).attr('for', inputId);
    });
});

$("#item1").MP({});
$("#item2").MP({});

 input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.panelTop > div div {
  display: none;
}

.panelTop > div input[type="checkbox"]:checked ~ div {
  display: block;
}

.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}

.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}

.panel > .panelBottom {
  width: 100%;
  height: 50px;
}

.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}

.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="checkbox" checked>
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>
<div class="panel" id="item2">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="checkbox" checked>
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input type="checkbox">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>

Теперь в приведенном выше примере видны данные, соответствующие кнопке 1 . если вы нажмете ту же кнопку еще раз, ее данные исчезнут. Я хочу, чтобы он работал таким образом, чтобы кнопка отображала только данные, а данные исчезали только при нажатии другой кнопки.

Есть идеи для достижения этого?

Ответ №1:

Вы можете просто использовать input[type=radio] вместо этого.

Показать фрагмент кода

 $.fn.MP = function(options) {
  var settings = $.extend({
    // These are the defaults
    text: ""
  }, options);

  $(this).on("click tap", "input", function() {
    $(this).parent().siblings().find("input").prop("checked", false);
  });
};

// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
  var $panel = $(el);
  var panelId = $panel.attr('id');
  var $panelBottom = $('div.panelBottom', $panel);

  $('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
    var $input = $(elInput);
    var inputId = panelId   '-box-'   indexInput;

    $input.attr('id', inputId);
    $('label:nth('   indexInput   ')', $panelBottom).attr('for', inputId);
  });
});

$("#item1").MP({});
$("#item2").MP({});

 input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.panelTop > div div {
  display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
  display: block;
}
.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="radio" checked>
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input type="radio">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input type="radio">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>
<div class="panel" id="item2">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="radio" checked>
      <div>1.1</div>
      <div>1.2</div>
      <div>1.3</div>
    </div>
    <div>
      <input type="radio">
      <div>2.1</div>
      <div>2.2</div>
      <div>2.3</div>
    </div>
    <div>
      <input type="radio">
      <div>3.1</div>
      <div>3.2</div>
      <div>3.3</div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>

В качестве примечания, вы можете воспользоваться функцией CSS counter() здесь. (Все объявлено внизу CSS для ясности).

Показать фрагмент кода

 $.fn.MP = function(options) {
  var settings = $.extend({
    // These are the defaults
    text: ""
  }, options);

  $(this).on("click tap", "input", function() {
    $(this).parent().siblings().find("input").prop("checked", false);
  });
};

// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
  var $panel = $(el);
  var panelId = $panel.attr('id');
  var $panelBottom = $('div.panelBottom', $panel);

  $('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
    var $input = $(elInput);
    var inputId = panelId   '-box-'   indexInput;

    $input.attr('id', inputId);
    $('label:nth('   indexInput   ')', $panelBottom).attr('for', inputId);
  });
});

$("#item1").MP({});
$("#item2").MP({});

 input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.panelTop > div div {
  display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
  display: block;
}
.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}
.panelTop {
  counter-reset: my-counter;
}
.panelTop > div {
  counter-increment: my-counter;
  counter-reset: sub-counter;
}
.panelTop > div > div {
  counter-increment: sub-counter;
}
.panelTop > div > div::before {
  content: counter(my-counter)"." counter(sub-counter)" ";
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="radio" checked>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>
<div class="panel" id="item2">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="radio" checked>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>

Редактировать:

Чтобы в полной мере использовать радио-группу, и чтобы это работало без:

   $(this).on("click tap", "input", function() {
    $(this).parent().siblings().find("input").prop("checked", false);
  });

Вы должны присвоить одинаковое значение атрибуту name на каждом радио в группе ввода.

Показать фрагмент кода

 $.fn.MP = function(options) {
  var settings = $.extend({
    // These are the defaults
    text: ""
  }, options);

};

// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
  var $panel = $(el);
  var panelId = $panel.attr('id');
  var $panelBottom = $('div.panelBottom', $panel);

  $('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
    var $input = $(elInput);
    var inputId = panelId   '-box-'   indexInput;

    $input.attr('id', inputId);
    $('label:nth('   indexInput   ')', $panelBottom).attr('for', inputId);
  });
});

$("#item1").MP({});
$("#item2").MP({});

 input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.panelTop > div div {
  display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
  display: block;
}
.panel {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
.panel > .panelTop {
  width: 100%;
  height: 49px;
  border-bottom: 1px dashed black;
}
.panel > .panelBottom {
  width: 100%;
  height: 50px;
}
.panel > .panelTop > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 0px 9px 0 0;
  border: 1px dashed black;
}
.panel > .panelBottom > div {
  width: 32px;
  height: 32px;
  float: right;
  margin: 9px 9px 0 0;
  border: 1px solid black;
  text-align: center;
  font-size: 22px;
}
.panelTop {
  counter-reset: my-counter;
}
.panelTop > div {
  counter-increment: my-counter;
  counter-reset: sub-counter;
}
.panelTop > div > div {
  counter-increment: sub-counter;
}
.panelTop > div > div::before {
  content: counter(my-counter)"." counter(sub-counter)" ";
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="radio" name="item1" checked>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio" name="item1">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio" name="item1">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>
<div class="panel" id="item2">
  <div class="panelTop">
    Dependant Buttons:
    <div>
      <input type="radio" name="item2" checked>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio" name="item2">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <input type="radio" name="item2">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="panelBottom">
    Main Buttons:
    <label class="btn1">1</label>
    <label class="btn2">2</label>
    <label class="btn3">3</label>
  </div>
</div>