Change radio button status when i click on any place of div

Question

             EventPrices += "<div class='after-price' id=divPrice>";
                       if (localStorage.getItem('SelectedRoleName') != null)
                       {
                           if (localStorage.getItem('SelectedRoleName').toString().trim() == "Admin") {
                               EventPrices += "<span class='price'><input type='radio' value='" + Item.PriceId + "' id='chkEventPrices'  class='fa fa-check' name='chkEventPrices' title='" + Item.Price + "' onclick='CalculateTotal();'><label> $" + Item.Price + " </label> </span> ";
                           }
                           else {
                               EventPrices += "<span class='price'><input type='radio' value='" + Item.PriceId + "' id='chkEventPrices' disabled= 'disabled'  class='fa fa-check' name='chkEventPrices' title='" + Item.Price + "' onclick='CalculateTotal();'><label> $" + Item.Price + " </label> </span> ";
                           }
                       } else {
                           EventPrices += "<span class='price'><input type='radio' value='" + Item.PriceId + "' id='chkEventPrices' disabled= 'disabled'  class='fa fa-check' name='chkEventPrices' title='" + Item.Price + "' onclick='CalculateTotal();'><label> $" + Item.Price + " </label> </span> ";
                       }


                       EventPrices += "<span class='date'>After " + moment(Item.EarlyBirdDate).format("MMM DD, YYYY") + " </span>";
                       EventPrices += "</div></div>";
                       EventPrices += "<div><span id='spnEventPriceLiteralDetails_" + i + "'>" + EventPriceLiteraldetals + "</span></div>";


                    }


                    EventPrices += "</div><br/>";
                    i++;
                });

This is my code.now if i click on particular radio button it is taking..i want if i click on box only radio button will select.

Can you post full code and rephrase your words ? quite confusing now. — Suresh Atta, Jul 28 '17 at 06:50
you can use label for this purpose , please see https://stackoverflow.com/questions/1527721/using-label-for-on-radio-buttons — gjijo, Jul 28 '17 at 06:51

gjijo · Answer 1 · 2017-07-28T07:16:15.860

$('input[type=radio]').click(function() {
  $("#isClicked").text("selected radio value is " + ($('input[type=radio]:checked').val() == "1" ? "Male" : "Female"));
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="r1"> Male
  <input type="radio" class="hidden" name="group1" id="r1" value="1" />
</label>
<label for="r2"> FeMale
  <input type="radio" class="hidden" name="group1" id="r2" value="2" />
</label>
<br />
<div id="isClicked"></div>

Please check this. Here whenever user clicks a label, its corresponding radio button click event gets triggered.

Jithin Raj P R · Answer 2 · 2019-06-24T09:31:46.390

0

As per you Q am guessing your function is working on click on radio button.

So let's take that you radio button class is .radio and 'div' class is .test in this case if you want we can go with `.trigger' of jQuery. eg:

$('body').on('click',`.test`,function(){
  $('.radio').trigger('click');
});

This will work as per me.ty

edited Jun 24 '19 at 09:31

answered Jul 28 '17 at 07:03

Jithin Raj P R

6,667
8
38
69

missing ' after body – Dhon Joe Jun 24 '19 at 09:28

Change radio button status when i click on any place of div

2 Answers2