Question

我想在用户选中一些复选框时发出事件。

我在下面编写了代码但没有发生任何事情 -

我添加了“警告”，但没有显示

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>

Answer 1

您必须将您的td放入表标记并将您的脚本添加到匿名函数中。见下面的代码。

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

Answer 2

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

Answer 3

我的建议

＆＃13;

$(function(){
  $("input[type='checkbox'][value=3]").on("click",function() {
      $(".reveal_div_by_checkbox_val").toggle(this.checked);
  });
});

＆＃13;

.reveal_div_by_checkbox_val { display: none }

＆＃13;

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

＆＃13;

更好 - 使用数据属性：

＆＃13;

$(function(){
  $("input[type='checkbox']").on("click",function() {
    var divId = $(this).attr("data-div");
    if (divId) {
      $("#"+divId).toggle(this.checked);
    }  
  });
});

＆＃13;

#ticket-cause { display: none }

＆＃13;

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

＆＃13;

Answer 4

您应该正确定义表格结构Table / Tr / Td。 Js代码是正确的。

用户选中某个复选框时的事件

4 个答案: