使用selectall的复选框无效

Question

我有3个复选框

• 点击＆＃34; A＆＃34;复选框A必须突出显示。
• 点击＆＃34; C＆＃34;复选框＆＃34; C＆＃34;突出显示。
• 点击＆＃34; B＆＃34;复选框＆＃34; A＆＃34;和＆＃34; B＆＃34;必须突出显示。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

点击＆＃34; B＆＃34;如何突出显示＆＃34; A＆＃34;和＆＃34; B＆＃34;作为多重选择。 这是我的完整code 如何实现这一点提出了一些建议。

Answer 1

试试这个

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

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

试试这个

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