Checkbox with selectall is not working

Question

I have 3 checkbox

On click of "A" checkbox the A has to be highlighted.
On click of "C" checkbox the "C" gets highlighted.
On click of "B" checkbox the "A" and "B" has to be highlighted.

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

On click of "B" how to get highlighted both "A" and "B" as multiple selection. Here is my complete code How to achieve this give some suggestions.

so u want to get highlighted one at a time or whatever you are clicking need to be highlighted along with the previous one you question is not clear. — Vishal Taj PM, Mar 27 '18 at 04:08
@ Vishal Taj PM on click of "B" checkbox both "A" and "B" should get highlighted and again if i click on"B" checkbox both "A" and "B" should uncheck — Sam, Mar 27 '18 at 04:11

Jeremiah Cabigting · Answer 1 · 2018-03-27T04:17:36.700

0

Try this

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

edited Mar 27 '18 at 04:17

answered Mar 27 '18 at 04:09

Jeremiah Cabigting

149
1
7

@lakshmipriya you need to place this code in document.ready: Like this: `$()document).ready(function(){ $('#r2').on("click",function(){ var r1 = $('#r1'); r1.prop('checked', true); }); })` – jarvo69 Mar 27 '18 at 04:20

score 0 · Answer 2 · answered Mar 27 '18 at 04:13

I modified you code. Check out the js part.

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

Athul Nath · Accepted Answer · 2018-03-27T05:45:36.563

0

Try this

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

edited Mar 27 '18 at 05:45

answered Mar 27 '18 at 04:15

Athul Nath

2,536
1
15
27

can u please tell me how to get the value of the checkbox when it is checked. – Sam Mar 27 '18 at 04:58
This may help you more https://stackoverflow.com/questions/11292778/use-jquery-to-get-values-of-selected-checkboxes – Athul Nath Mar 27 '18 at 05:06
Thank you but the values are getting fetched even if i uncheck it – Sam Mar 27 '18 at 05:35
You could add a condition for that before fetching the value (edited) – Athul Nath Mar 27 '18 at 05:44
its working but i need to know which value belongs to which label – Sam Mar 27 '18 at 06:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167598/discussion-between-anuresh-and-lakshmi-priya). – Athul Nath Mar 27 '18 at 06:44

Checkbox with selectall is not working

3 Answers3