CSS复选框，仅当选中另一个项目时，如何取消选中该项目

时间：2016-10-06 21:09:48

标签： javascript jquery html css

我正在尝试根据CSS Checkbox制作某种幻灯片。因此，按下按钮时可以看到相应的数据。 但问题是如果再次按下按钮，数据会消失。我想按照按下按钮并且其数据可见的方式来制作，只有在按下另一个按钮时它才会消失。因此，除非按下另一个按钮，否则它不会打开和关闭。

以下是DEMO

＆＃13;
＆＃13; 
$.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({});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

现在在上面的例子中，对应于按钮1的数据是可见的。如果再次按相同按钮，其数据将消失。我希望它的工作方式是按钮只显示数据，只有当按下不同的按钮时数据才会消失。

有任何想法实现这一目标吗？

1 个答案:

答案 0 :(得分：3)

您可以改为使用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>

相关问题
最新问题