Dynamic check box alert

admin's picture

<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn1").click(function(){
            var val = $("#txtAdd").val();
            $("#divContainer").append ( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' /><br/>" );
            idCounter ++;
        });
      });

      $(function(){
        // Variable to get ids for the checkboxes
        var idCounter=1;
        $("#btn2").click(function(){
            var val = $("#txtAdd").val();
            //$("#divContainer").remove();
            //alert(val)
                $('#chk_' + idCounter).remove();

            //idCounter ++;
        });
      });  

        
        
    
</script>
</head>

<body>
<div id='divContainer'></div>
<input type="text" id="txtAdd" />
<button id="btn1">Add</button>
<button id="btn2">Remove</button>

<!-- <button class="check">All</button> -->
<input type="checkbox" id="chkSelectAll" /><label id="sel">Select All</label></b>
<script>

$(document).ready(function(){
    $('#chkSelectAll').click(function(){
            if ($(this).is(':checked')) {
            $('#divContainer> input[type=checkbox]').each(function() {
                $(this).prop("checked", true); $('#sel').text('Un-Select All');
            });
        }
        else {
            $('#divContainer input[type=checkbox]').each(function() {
                $(this).prop("checked", false); $('#sel').text('Select All');
            });
        }        
    
})
})




</script>
</body>
</html>

Technoloies: 

Comments

admin's picture

http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
admin's picture

http://www.jqueryfaqs.com/Articles/Dynamically-add-and-remove-TextBoxes-and-get-value-of-dynamic-TextBox-using-jQuery.aspx

Add new comment