如果選中我的復選框，如何添加具有ID的div？

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');
    });
});

如何在單擊復選框后將div包含在id = message的底部？ 如果有人可以幫忙，請告訴我。

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

});

這里是對JSFiddle的測試。

注意：您真的確定邏輯要求您在另一個事件“ onchange”中初始化事件“ onchange”嗎？ 您可以使用console.log（“ fire event”）來檢查邏輯是否正常工作。

更新：這是正確的答案

$('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);

});

這是JSFiddle的正確的實時示例。

Answer 2

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

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

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