Как получить метку флажка для галочки и использовать массив для отображения меток

0

Я новичок в JavaScript и jQuery. Я пытаюсь выяснить, как получить мои флажки, отмеченные ярлыками, чтобы в конечном итоге отправить на следующую веб-страницу. Я также хочу отправить полный список отмеченных и не отмеченных ящиков на следующую веб-страницу, поэтому я подумал, что просто сохраню их в массиве, чтобы начать, но массив не работает, чтобы отобразить его.

Способ работы этой страницы списка флажков заключается в том, что после того, как пользователь выполнил проверку, они нажимают кнопку, и результаты фиксируются для отправки.

Я начал выполнять эту функцию, но я пытаюсь использовать массив с полным списком меток, которые будут использоваться для отображения и отправки позже. У меня возникли проблемы с получением массива для отображения имени метки, и я не могу не думать, что я не делаю этого правильно или что есть лучший способ сделать это. Я занимаюсь проверенным значением (on), когда я использовал inpfields[i].value, но мне действительно нужна отмеченная метка элемента. Когда я использовал inpfields[i].label, он ничего не возвращал. Я также попробовал lblFields [i].label, и он тоже был пуст.

Мои вопросы:

  1. Что вы рекомендуете мне делать с массивом, чтобы заставить его работать на ярлыке флажка?
  2. Как получить массив проверенных элементов для использования позже?

У меня появилась идея нажать кнопку для обработки флажка здесь. Я пытаюсь понять массивы здесь, но пока не работает. У меня появилась идея использовать методологию getLabel (id) здесь, но она не работает.

Прямо сейчас, когда я нажимаю кнопку, я получаю всплывающее окно, в котором говорится об объекте HTMLCollection.

<!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>
        function getHeading(var i){
            var allCheckboxLabels = [Heading1, Heading2, Heading3];
            document.getElement().innerHTML = allCheckboxLabels[i];
        }

    </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 lblFields = frm.getElementsByTagName('label');
        //alert(lblFields);
        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(lblFields[i].value);
        }

        return selchbox;
    }
    $(function(){
        document.getElementById('btntest').onclick = function() {
            var selchb = getSelectedChbox(this.form);
            alert(selchb);
        }
    });

    //function getLabel(id){
    //    return $("#"+id).next("label").html();
    //}
    </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">getHeading(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> 

      </dd>

    </dl>

  </div>

        <div id="loading">
            <input type="button" value="Click" id="btntest" /> 
        </div>

</form>

</body>
</html>
  • 2
    Что это за магия, когда вы можете определять переменные в качестве аргументов и иметь getElement() функцию getElement() где вам даже не нужно передавать селектор?
  • 0
    Не могли бы вы быть более точным, пожалуйста? Похоже, я что-то пропустил ... Я попытался getElementByTagName и getHeading (i), но это ничего не изменило. Я все еще вижу getHeading (1).
Показать ещё 1 комментарий
Теги:
arrays
checkbox

1 ответ

0
Лучший ответ

Я понял. Я закончил с использованием:

if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);

Спасибо за подсказку!

Вот как я получил массив allLabels. Я больше не использовал getheading (i) в своем ярлыке. Я просто использую текст для ярлыков, потянув имена в массив, а затем я выясню, как отправить массив на следующую веб-страницу.

        function getSelectedChbox(frm) {
            // JavaScript & jQuery Course - http://coursesweb.net/javascript/
            var selchbox = [];        // array that will store the value of selected checkboxes
            var allLabels = [];       // array to store value of all checkboxes, selected and not
            // gets all the input tags in frm, and their number
            var inpfields = frm.getElementsByTagName('input');
            var lblFields = frm.getElementsByTagName('label');
            var allLabelFields = frm.getElementsByTagName('label').innerHTML;


            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(lblFields[i].innerHTML);

                if(inpfields[i].type == 'checkbox') allLabels.push(lblFields[i].innerHTML);

            }
            alert(allLabels);
            return selchbox;
        }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню