I have my dynamic table with table cell where I created chekbox input. That check box switch the text available and blocked depends if it's checked or not. Now I would like to add div with id that will show up each time when I click on the check box. Problem is if I click on the check box now, my div will show up just on the first row, not on the row where I clicked on. Here is my code:
<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>
Here is my JQuery:
$('input[type=checkbox]').on('change', function() {
$('label').on('change', function() {
var checked = $('input', this).is(':checked');
$('span', this).text(checked ? 'Blocked' : 'Available');
});
});
How I can include my div on the bottom with id=message to show up each time after I click on the check box? If anyone can help please let me know.
Try this...
$('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);
});
Note: Are you really sure that your logic requires you to initialize an event "onchange" in another event "onchange" ? You can use console.log("fire event") to check if the logic work properly.
UPDATE: This is the correct answer
$('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);
});
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.