Creating Dynamic Checkbox using Jquery

Question

I am trying to create dynamic check box using jquery. but it shows some error Uncaught SyntaxError: Unexpected token ILLEGAL

i tried to remove all spaces from the code. but even though its showing same error.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
     #container input {
   display: block;
  }
 .new-element.active {
  color: red;
  }
  </style>
    <script>
   $(document).ready(function () {
      $("#createCheckBox").click(function (e) {
      var lbl = prompt("Enter label", "");
       if (lbl != null) {
       var name = "
        <div class='new-element'>
            <input class='chk'                            type='checkbox' id='chk' name='chk' />
            <label for='chk'>" + lbl + "</label>
        </div>";
      var result = true;
     $("#holder").find("input[type=checkbox]").each(function (index, value)    {
     console.log('Entered here');
      if ($($(value).closest("div").children()[1]).text() == lbl) {
      result = false;
        alert(lbl + ' already exists');
        return;
      }
    });
     if (result)
     $("#holder").append(name);
    }
   });　
       $("#delete").click(function () {
         $('.new-element input:checked').parent().remove();
      });
     });
    </script>
</head>
<body>
    <div id="container">
        <input type="button" id="createCheckBox" value="Add CheckBox" style=""      />
        <input type="button" id="delete" value="Delete" style="" />
        <input type="button" id="selectall" value="selectall" style="" />
    </div>
    <div id="holder"></div>
</body>
</html>

user4467065 · Accepted Answer · 2015-06-29 17:02:24Z

2

Two things :

1) First of all, there is a weird character at the end of

    if (result) {
      $("#holder").append(name);
    }

  }); <-- here

2) Your function is not closed properly line 49, replace :

 }); by }});

answered Jun 29, 2015 at 17:02

user4467065

1411 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md Atiqul Haque · Accepted Answer · 2015-06-29 17:54:23Z

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        #container input {
            display: block;
        }

        .new-element.active {
            color: red;
        }
    </style>
    <script>
        $(document).ready(function () {

            $("#createCheckBox").click(function () {
                var lbl = prompt("Enter label", "");
                if (typeof lbl != 'undefined') {

                    var name = "<div class='new-element'>" +
                        "<input class='chk' type='checkbox' id='chk' name='chk' /> " +
                        "<label for='chk'>" + lbl + "</label> " +
                        "</div>";

                    var result = true;

                    $("#holder").find("input[type=checkbox]").each(function (index, value) {
                        if ($($(value).closest("div").children()[1]).text() == lbl) {
                            result = false;
                            alert(lbl + ' already exists');
                            return;
                        }
                    });
                    if (result)
                        $("#holder").append(name);
                }
            })

            $("#container").on('click','#delete',function () {
                $('.new-element input:checked').parent().remove();
            });

            $("#container").on('click','#selectall',function () {
                $("#holder .new-element").find("input[type=checkbox]").each(function(i,value){
                    $(value).prop('checked',!$(value).is(':checked'));
                });
            });

        });
    </script>
</head>
    <body>
    <div id="container">
        <input type="button" id="createCheckBox" value="Add CheckBox" style=""/>
        <input type="button" id="delete" value="Delete" style=""/>
        <input type="button" id="selectall" value="selectall" style=""/>
    </div>
    <div id="holder"></div>
    </body>
    </html>

user993164 · Accepted Answer · 2016-04-11 04:40:09Z

following HTML

       <body>
        <div id="container">

         <input type="button" id="createCheckBox" value="Add CheckBox" />
         <input type="button" id="delete" value="Delete" />
         <input type="button" id="selectall" value="selectall"  />
         <input type="button" id="status" value="status" />

        </div>

        <div id="holder"></div>
   </body>

following is JS file

$(document).ready(function () {

  $("#createCheckBox").click(function (e) 
   {
     var lbl = prompt("Enter label", "");
     if (lbl != null) 
     {
        var name = "<div class='new-element'><input class='chk' type='checkbox' id='chk' name='chk' /><label for='chk'>" + lbl + "</label></div>";
        var result = true;

         $("#holder").find("input[type=checkbox]").each(function (index, value)
            {
                console.log('Entered here');
                if ($($(value).closest("div").children()[1]).text() == lbl)
                {
                    result = false;
                    alert(lbl + ' already exists');
                    return;
                }
            });

        if (result)
        $("#holder").append(name);

    } // console.log(1);
});

$("#delete").click(function () 
{
    $('.new-element input:checked').parent().remove();
});

$("#selectall").click(function ()
{
    $('input[type="checkbox"]').attr('checked', true);
});

$("#status").click(function ()
{
   debugger;
   var checkBoxCount = $('input[type="checkbox"]').length;
   var checkedStatus = $('input[type="checkbox"]:checked').length;
   var totalCheckBox = checkBoxCount - checkedStatus;
   alert("total check box : " + checkBoxCount + "checked check box : " + checkedStatus + "Unchecked checkBox :"+totalCheckBox);
});
});

user993164 · Accepted Answer · 2016-07-29 07:45:34Z

      <!DOCTYPE html>
      <html>
        <head>
         <title>Mustache Dynamic Check Box</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/external/jquery-1.7.1.min.js"></script>
    <script src="js/external/mustache.js"></script>
    <script src="js/mustacheDynamic.js" type="text/javascript"></script>
</head>
<body>

    <div id="container">
        <input type="button" id="createCheckBox" value="Add CheckBox" />
        <input type="button" id="delete" value="Delete" />
        <input type="button" id="selectall" value="selectall"  />
        <input type="button" id="status" value="status" />
    </div>

    <div id="DynamicCheckBoxHolder">

    </div>


    <script id="dynamic-CheckBox-templete" type="text/templete">

            <div class="{{eachDivClassName}}">
                <input type="{{inputType}}" class="{{className}}" id="{{id}}" name="{{name}}"> <label for="{{id}}">{{UserEnteredCheckBoxLabel}}</label>
            </div>

    </script>
</body>

       $(document).ready(function()
        {
        var eachDivClassName = "eachDiv";
        var inputType = "checkbox";
        var eachCheckBoxClassName = "eachCheckBox";
        var eachCheckBoxClassId = "checkBoxId";
        var eachCheckBoxName = "eachCheckBoxName"

         $("#createCheckBox").on('click', function (e) {

         var UserEnteredCheckBoxLabel = prompt("Enter label", "");
         //var result = true;

          if ((UserEnteredCheckBoxLabel != null) && (UserEnteredCheckBoxLabel != ""))
          {
           var result = true;
                       $("#DynamicCheckBoxHolder").find("input[type=checkbox]").each(function (index, value) {

            console.log('Entered here');
            if ($($(value).closest("div").children()[1]).text() === UserEnteredCheckBoxLabel)
            {
                result = false;
                alert(UserEnteredCheckBoxLabel + ' already exists');
                return;
            }
        });

        if (result)
        {
            var dataObjectsForCreateCheckBox = {};
            dataObjectsForCreateCheckBox.eachDivClassName = eachDivClassName;
            dataObjectsForCreateCheckBox.UserEnteredCheckBoxLabel = UserEnteredCheckBoxLabel;
            dataObjectsForCreateCheckBox.inputType = inputType;
            dataObjectsForCreateCheckBox.className = eachCheckBoxClassName;
            dataObjectsForCreateCheckBox.id = eachCheckBoxClassId;
            dataObjectsForCreateCheckBox.name = eachCheckBoxName;

            var template = $('#dynamic-CheckBox-templete').html();
            var html = Mustache.to_html(template, dataObjectsForCreateCheckBox);

            $("#DynamicCheckBoxHolder").append(html);
        }
    }

});

$("#delete").on('click', function()
{
    $('.eachDiv input:checked').parent().remove();
});

$("#selectall").on('click', function()
{
   $('input[type="checkbox"]').attr('checked', true); 
});

$("#status").on('click', function (){

    var totalCheckBoxCount = $('input[type="checkbox"]').length;
    var checkedCheckBoxCount = $('input[type="checkbox"]:checked').length;
    var unCheckedCheckBox = totalCheckBoxCount - checkedCheckBoxCount;
    alert("total check box : " + totalCheckBoxCount + " checked check box : " + checkedCheckBoxCount + "  Unchecked checkBox : " + unCheckedCheckBox);

});

});

Collectives™ on Stack Overflow

Creating Dynamic Checkbox using Jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related