带有 selectall 的复选框不起作用

Question

我有 3 个复选框

• 点击“A”复选框时，必须突出显示 A。
• 点击“C”复选框时，“C”会突出显示。
• 点击“B”复选框时，必须突出显示“A”和“B”。

.a {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}

#checkboxes input[type=checkbox] {
  display: none;
}

#checkboxes input[type=checkbox]:checked+.a {
  border-top: 2px solid #39cd90;
  color: rgb(57, 205, 144);
  padding-top: 0px;
}

<div id="checkboxes">
  <input type="checkbox" name="rGroup" id="r1" />
  <label class="a" for="r1">A </label>
  <input type="checkbox" name="rGroup" id="r2" />
  <label class="a" for="r2">B </label>
  <input type="checkbox" name="rGroup" id="r3" />
  <label class="a" for="r3">C</label>
</div>

单击“B”时，如何将“A”和“B”都突出显示为多项选择。 这是我完整的code 如何实现这一点给出一些建议。

Answer 1

试试这个

$(document).ready(function() {
	
	var chk1 = $("#r1");
	var chk2 = $("#r2");
	
	chk2.on('change', function(){
		chk1.prop('checked',this.checked);
	});

  /*For getting values */
  $('.a').click(function() {
    if(!$(this).prev().is(':checked')) {
	  var val=$(this).prev().val();
	  console.log(val);
	  }
  });
});

.a{
   background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .a{
    border-top: 2px solid #39cd90;
  color: rgb(57, 205, 144);
  padding-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
   <input type="checkbox" name="rGroup" value="1" id="r1" />
  <label class="a" for="r1">A </label>
  <input type="checkbox" name="rGroup" value="2" id="r2" />
  <label class="a" for="r2">B </label>
  <input type="checkbox" name="rGroup" value="3" id="r3" />
  <label class="a" for="r3">C</label>
</div>

Answer 2

我修改了你的代码。查看js部分。

https://jsfiddle.net/s0wxewuv/13/

$(function() {
    $('#r2').on('change', function() {
        if ($(this).is(':checked')) {
            $('#r1').prop('checked', true);
            $('#r3').prop('checked', false);
        } else {
            $('#r1').prop('checked', false);
            $('#r3').prop('checked', false);
        }
    })
})

Answer 3

试试这个

$('#r2').on("click",function(){
  var r1 = $('#r1');
  r1.prop('checked', true);
});