Question

我是jQuery和JavaScript的新手。我有一个看起来很棒的复选框列表，但我试图添加一个按钮，以便当用户完成检查时，按下按钮，然后调用我的函数来确定检查的内容以及什么没有检查。

但是，我的按钮丢失了。我尝试将li标签中的代码添加到复选框部分的其余部分，但它没有显示出来。我尝试在dd标签之后以及在div结束之后添加它。我想我必须把它保存在我的功能的表格标签内，除非我弄错了。任何想法为什么按钮没有出现？

This就是我发现功能想法的例子。我在互联网上搜索，找不到任何好主意，为什么我的按钮没有显示出来。它可能是标签或其他内容的语法错误。

谢谢！

这是我的代码：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.

-->
<html>
    <head>
        <title>jQuery Michele Project</title>
        <link href="css/skins/polaris/polaris.css" rel="stylesheet">
        <link href="css/skins/all.css" rel="stylesheet">
        <link href="css/demo/css/custom.css" rel="stylesheet">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script src="js/icheck.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.input').iCheck({
                    checkboxClass:'icheckbox_polaris',
                    radioClass:'iradio_polaris',
                    increaseArea:'10%'
                });
            });
        </script>

        <script type="text/javascript">
        // Returns an array with values of the selected (checked) checkboxes in "frm"
        function getSelectedChbox(frm) {
            // JavaScript & jQuery Course - http://coursesweb.net/javascript/
            var selchbox = [];        // array that will store the value of selected checkboxes

            // gets all the input tags in frm, and their number
            var inpfields = frm.getElementsByTagName('input');
            var nr_inpfields = inpfields.length;

            // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
            for(var i=0; i<nr_inpfields; i++) {
                if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
            }

            return selchbox;
        }

        document.getElementById('btntest').onclick = function() {
            var selchb = getSelectedChbox(this.form);
            alert(selchb);
        }
        </script>

        <style type="text/css">
            ul {list-style-type: none}
            img {padding-right: 20px; float:left}
            #infolist {width:500px}
        </style>
    </head>
    <body>
    <form>
    <div class="skin skin-line">
        <div class="arrows">
          <div class="top" data-to="skin-flat"></div>
          <div class="bottom" data-to="skin-polaris"></div>
        </div>

      </div>
      <div class="skin skin-polaris">
        <div class="arrows">
          <div class="top" data-to="skin-line"></div>
          <div class="bottom" data-to="skin-futurico"></div>
        </div>
        <h3>Select Items for Column Headings</h3>
        <dl class="clear">
          <dd class="selected">
            <div class="skin-section">
              <h4>Live</h4>

              <ul class="list">
                <li>
                  <input tabindex="21" type="checkbox" id="polaris-checkbox-1">
                  <label for="polaris-checkbox-1">Checkbox 1</label>

                </li>
                <li>
                  <input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
                  <label for="polaris-checkbox-2">Checkbox 2</label>
                </li>
                <li>
                  <input type="checkbox" id="polaris-checkbox-3" >
                  <label for="polaris-checkbox-3">Checkbox 3</label>
                </li>
                <li>
                  <input type="checkbox" id="polaris-checkbox-4" checked >
                  <label for="polaris-checkbox-4">Checkbox 4</label>
                </li>

              </ul>

            </div>

            <script>
            $(document).ready(function(){
              $('.skin-polaris input').iCheck({
                checkboxClass: 'icheckbox_polaris',
                radioClass: 'iradio_polaris',
                increaseArea: '20%'
              });
            });
            </script>

           $('#checkbox').prop('checked')  

          </dd>

        </dl>
      </div>
     <input type="button" value="Click" id="btntest" /> //this button isnt showing up on web page
    </form>

    </body>
</html>

无法让按钮显示出来

0 个答案: