On DIV click, check multiple checkbox (Not with same name)

Question

My radio button are named dynamically. How to check all the checkbox on div click. The div and each radio has unique id. The div actually represent cards. I want upon clicking on card how to select all the listed radio in div How to dynamically get all child node from javascript but check all the radio

<div id=<?= ($counter-1) ?> class="card categoryCard" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title"><?= $rows[$counter-1]["TICKETDESCRIPTION"]?></h5>
    <input type="radio" id=<?='TICKETDESCRIPTION'.($counter-1) ?> name="TICKETDESCRIPTION" >
    <p class="card-text"><label>RM <?= $rows[$counter-1]["TICKETPRICE"]?></label></p>
    <input type="radio" id=<?='TICKETPRICE'.($counter-1) ?> name="TICKETPRICE" >
  </div>
</div>

Below is my javascript code

$('.categoryCard').click(function(){
    var id = $(this).attr('id');
    var radiobtn = document.getElementById("TICKETDESCRIPTION"+id);
    radiobtn.checked = true;
    alert(id);
});

why are you mixing up jQuery with javascript ?. that is not a good practice. var radiobtn = document.getElementById("TICKETDESCRIPTION"+id); this can be replaced with var radiobtn = $("#TICKETDESCRIPTION"+id); — Akhil Aravind
– Akhil Aravind, Commented Dec 28, 2018 at 4:20
you can select all the radio button using 'input[type=radio]' — Akhil Aravind
– Akhil Aravind, Commented Dec 28, 2018 at 4:22
@AkhilAravind Yes, but lets say i have 2 radio button, it doesnt select all the radio button when i click on the div — KIRPAL SINGH
– KIRPAL SINGH, Commented Dec 28, 2018 at 4:24

David Bray · Accepted Answer · 2018-12-28 04:37:18Z

1

// assuming jquery

$('.categoryCard').click(function(e){
   $('input[type="radio"]', this).each( function( i) {
     $(this).prop('checked', true);

   });

});

edited Dec 28, 2018 at 4:37

answered Dec 28, 2018 at 4:26

David Bray

5861 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

KIRPAL SINGH Over a year ago

can you explain what is function(i, el)?

KIRPAL SINGH Over a year ago

For it to be check, should i use "attribute" instead of "property"?

KIRPAL SINGH Over a year ago

@MrJ No, he is actually correct. This is because my i am looping and i need to make cards in such a way that each card has same radio button but different value.

David Bray Over a year ago

actually it was little wrong, see update - but no - prop is the correct jquery method see here : api.jquery.com/each

KIRPAL SINGH Over a year ago

Can explain why have "this" in $('input[type="radio"]', this)

|

Kaushik · Accepted Answer · 2018-12-28 04:44:47Z

1

There are many ways to implement the same. I've described the two ways.

You must not use the ID as duplicate.

ID is identifier for the elements, so it must not be duplicate.

$('.categoryCard').click(function(e){
   $('input[type="radio"]', this).each( function( index, element) {
     $(element).prop('checked', true);

   });

});

$('.categoryCard').click(function(e){
  var id = $(this).attr('id');
   $('input[data-details="'+ id +'"]', this).each( function( index, element) {
     $(element).prop('checked', true);

   });

});

.categoryCard{
border: 1px solid #d4d4d4;
padding: 5px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="1" class="card categoryCard" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Desc</h5>
    <input type="radio" name="TICKETDESCRIPTION">
    <p class="card-text">Price</p>
    <input type="radio" name="TICKETPRICE" >
  </div>
</div>

<!-- 2nd Method there must be no duplicate ID  -->

<div id="2" class="card categoryCard" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Desc</h5>
    <input type="radio" name="TICKETDESCRIPTION" data-details ="1">
    <p class="card-text">Price</p>
    <input type="radio" name="TICKETPRICE" data-details ="1" >
  </div>
</div>

edited Dec 28, 2018 at 4:44

answered Dec 28, 2018 at 4:37

Kaushik

2,0901 gold badge24 silver badges32 bronze badges

1 Comment

KIRPAL SINGH Over a year ago

this will help alot of people

Rohit · Accepted Answer · 2018-12-28 05:53:22Z

1

It can be also solved like this:-

$('.categoryCard').click(function(){
   $(this).find('input[type="radio"]').each(function() {
     $(this).prop('checked', true);
   });
});

answered Dec 28, 2018 at 5:53

Rohit

112 bronze badges

Collectives™ on Stack Overflow

On DIV click, check multiple checkbox (Not with same name)

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related