Question

我的动态表格包含表格单元格，我创建了chekbox输入。该复选框切换可用和阻止的文本取决于是否已选中。现在我想添加带有id的div，每次单击复选框时都会显示该ID。问题是，如果我现在点击复选框，我的div将显示在第一行，而不是我点击的行。这是我的代码：

<tr class="blockRow">
   <td>
       <cfif qryTable.UserID EQ 0>
           <label>
             <input type="checkbox" name="stop" id="stop" onChange="updateTable('#TimeID#')" checked>
             <span>Blocked</span>
           </label>
       </cfif>
       <cfif qryTable.UserID EQ -1>
           <label>
                <input type="checkbox" name="stop" id="stop" onChange="updateTable('#TimeID#')">
                <span>Available</span>
           </label>
       </cfif>
       <div id="message"></div>
    </td>
</tr>

这是我的JQuery：

$('input[type=checkbox]').on('change', function() {
    $('label').on('change', function() {
         var checked = $('input', this).is(':checked');
         $('span', this).text(checked ? 'Blocked' : 'Available');
    });
});

如何在点击复选框后每次显示id = message时底部包含我的div？如果有人可以提供帮助，请告诉我。

Answer 1

试试这个......

$('input[type=checkbox]').on('change', function() {
    $('label').on('change', function() {
         var checked = $('input', this).is(':checked');
         $('span', this).text(checked ? 'Blocked' : 'Available');
        });

    // Add one DIV (with ID message) after "cfif" closest to the element clicked
    $(this).closest('cfif').after('<div id="message">my message</div>');

    // The timeout is for remove the message after 1sec
    setTimeout(function(){
       $('#message').remove();
    }, 1000);

});

Here the test on JSFiddle.

注意：您是否确定您的逻辑要求您初始化事件＆＃34; onchange＆＃34;在另一个事件＆＃34; onchange＆＃34; ？您可以使用console.log（＆＃34; fire event＆＃34;）来检查逻辑是否正常工作。

更新：这是正确答案

$('input[type=checkbox]').on('change', function() {
    $('label').on('change', function() {
         var checked = $('input', this).is(':checked');
         $('span', this).text(checked ? 'Blocked' : 'Available');
        });

    $(this).closest('td').append('<div id="message" class="allmessage">my message</div>');

    setTimeout(function(){
       $('.allmessage').remove();
    }, 1000);

});

And this is the correct live example of JSFiddle.

Answer 2

＆＃13;

$(function () {
  
                $("#kcd").click(function () {
                    if ($(this).is(":checked")) {
                        $("#kcddiv").show();
                    } else {
                        $("#kcddiv").hide();
                    }
                });
            });

＆＃13;

body
            {
                font-family: Arial;
                font-size: 10pt;
            }
            .container{
                margin:5% 20% 20% 10%;
                width:500px;
                height:200px;
                background-color:#C9EAF5;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
        <label for="kcd">
            <input type="checkbox" id="kcd" />
            Do you Want show div after check?
        </label>
        <hr />
        <div id="kcddiv" style="display: none">
            Your new div has appended
            <input type="text" id="kcdnum" />
        </div>
        </div>

＆＃13;

如果选中我的复选框，如何添加带有ID的div？

2 个答案: