如果我的複選框被選中，如何添加div與ID？

我有我的動態表與表格單元格，我創建chekbox輸入。該複選框切換文本可用和阻止取決於是否選中。現在我想添加ID的div，每次點擊複選框時都會顯示出來。問題是，如果我現在點擊複選框，我的div將顯示在第一行，而不是我點擊的那一行。這裏是我的代碼：如果我的複選框被選中，如何添加div與ID？

<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 =消息底部的每一次露面後，我點擊複選框DIV？如果有人能幫助請讓我知道。

來源

2016-01-06 espresso_coffee

嘗試......

$('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.

注意：你真的確定你的邏輯，你需要在另一個事件「的onchange」初始化事件「的onchange」？您可以使用console.log（「火災事件」）來檢查邏輯是否正常工作。

UPDATE：這是正確的答案

$('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.

來源

2016-01-06 14:23:32 Baro

我試過，但還是我的div顯示了只在第一行。 –

有可能是我不明白的東西。行是「TR」，在你的例子中你有一個單元格「TD」，然後在HTML例子中複製行「TR」，這是你想要的結果？ https://jsfiddle.net/do0vdyy9/2/ – Baro

我想爲不完全明確的問題道歉。是的這實際上解決了我的問題。現在我的div出現在我點擊的td旁邊，幾秒鐘後消失。謝謝你的幫助！ –

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

來源

2016-01-06 14:44:04

如果我的複選框被選中，如何添加div與ID？

回答

相關問題