CODEWITHSUNDEEP
jquery
Roi
Roi

Reputation: 31

event when user check some checkbox

I want to make event when user check some checkbox.

I wrote the code below but nothing happened -

I added "alert", but it doesn't shown

HTML

<td id='checkbox_val_to_reveal'>

    <div class="form-group">
        <label>Status</label>
        <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='1'  /> Waiting for support to reply</label></div>
        <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='2'  /> Waiting for customer to reply</label></div>
        <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='3'  /> Solved</label></div>
        <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='4'  /> QA</label></div>
        <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='5'  /> Waiting for programmer to reply</label></div>
    </div>

</td>


<div class='reveal_div_by_checkbox_val'>
    <p><label class="title">Ticket Cause</label><br />
</div>

JS

<script>
//  $("#checkbox_val_to_reveal .flat").change(function() {

    $("#checkbox_val_to_reveal input[type='checkbox']").change(function() {
        alert("RRR");

    if ($(this).val() === "3" && $(this).is(":checked")) {
        $(".reveal_div_by_checkbox_val").show();
    } else {
        $(".reveal_div_by_checkbox_val").hide();
    }
    });
</script>

Upvotes: 0

Views: 78

Answers (4)

Tejas Thakor
Tejas Thakor

Reputation: 97

You should define table structure properly Table/Tr/Td. Js code is proper.

Upvotes: 0

Ram Jadhav
Ram Jadhav

Reputation: 99

You have to just put your td into table tag and add your script into anonymous function. see the below code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>
    <script>
        //  $("#checkbox_val_to_reveal .flat").change(function() {
        $(function(){
            $("#checkbox_val_to_reveal input[type='checkbox']").change(function() {
                alert("RRR");
                if ($(this).val() === "3" && $(this).is(":checked")) {
                    $(".reveal_div_by_checkbox_val").show();
                } else {
                    $(".reveal_div_by_checkbox_val").hide();
                }
            });
        });
</script>
</head>
<body>
<table>
    <td id='checkbox_val_to_reveal'>
        <div class="form-group">
            <label>Status</label>
            <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='1'  /> Waiting for support to reply</label></div>
            <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='2'  /> Waiting for customer to reply</label></div>
            <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='3'  /> Solved</label></div>
            <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='4'  /> QA</label></div>
            <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='5'  /> Waiting for programmer to reply</label></div>
        </div>
    </td>
</table>
<div class='reveal_div_by_checkbox_val'>
    <p><label class="title">Ticket Cause</label><br />
</div>
</body>
</html>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177692

My suggestion

$(function(){
  $("input[type='checkbox'][value=3]").on("click",function() {
      $(".reveal_div_by_checkbox_val").toggle(this.checked);
  });
});
.reveal_div_by_checkbox_val { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id='checkbox_val_to_reveal'>

<div class="form-group">
  <label>Status</label>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='1'  /> Waiting for support to reply</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='2'  /> Waiting for customer to reply</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='3'  /> Solved</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='4'  /> QA</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='5'  /> Waiting for programmer to reply</label></div>
</div>

</td>


<div class='reveal_div_by_checkbox_val'>
    <p><label class="title">Ticket Cause</label><br />
</div>

Better - use a data attribute:

$(function(){
  $("input[type='checkbox']").on("click",function() {
    var divId = $(this).attr("data-div");
    if (divId) {
      $("#"+divId).toggle(this.checked);
    }  
  });
});
#ticket-cause { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id='checkbox_val_to_reveal'>

<div class="form-group">
  <label>Status</label>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='1'  /> Waiting for support to reply</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='2'  /> Waiting for customer to reply</label></div>
  <div class='checkbox'><label><input type='checkbox' data-div="ticket-cause" class='flat' name='statusID_Array[]' value='3'  /> Solved</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='4'  /> QA</label></div>
  <div class='checkbox'><label><input type='checkbox' class='flat' name='statusID_Array[]' value='5'  /> Waiting for programmer to reply</label></div>
</div>

</td>


<div id='ticket-cause'>
    <p><label class="title">Ticket Cause</label><br />
</div>

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

<script>
    $("input[type='checkbox']").on("click",function() {  // Check the updated line here
        alert("RRR");

    if ($(this).val() === "3" && $(this).is(":checked")) {
        $(".reveal_div_by_checkbox_val").show();
    } else {
        $(".reveal_div_by_checkbox_val").hide();
    }
    });
</script>

Upvotes: 0

Related Questions