Question

我正在尝试使用jquery创建动态复选框。但它显示一些错误Uncaught SyntaxError：Unexpected token ILLEGAL

我试图从代码中删除所有空格。但即使它显示相同的错误。

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

Answer 1

两件事：

1）首先，

末尾有一个怪异的角色

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

  }); <-- here

2）你的功能没有正确关闭第49行，替换：

 }); by }});

Answer 2

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

Answer 3

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

});

});

使用Jquery创建动态复选框

3 个答案: