如何通过单击div单击单选？

Question

Why is my code not working? i need to simulate click on radio button. Radio button has click event.

 $(".form-group").click(function() { alert("clicked") $(this).closest(".hotelObj", function() { $(this).trigger("click"); }) }); 

 .form-group { background-color: pink; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <label for="male" style="font-weight:800;">chose <input type="radio" value="z6" class="hotelObj" name="hotelType"> <p>description</p> </label> </div> 

Answer 1

Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.

Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).

 .form-group { background-color: pink; } 

 <div class="form-group"> <label style="font-weight:800;">chose <input type="radio" value="z6" class="hotelObj" name="hotelType"> <p>description</p> </label> </div> 

Answer 2

Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree. This way element with class .hotelObj is never found.

You need to use .find() method to find .hotelObj , because it's inside .form-group .

$(".form-group").click(function() {
  $(this)
     .find(".hotelObj")
     .trigger("click");
});

Answer 3

Try onClickHandled property

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>