Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсчет выбранных чекбоксов, радио, текста (https://javascript.ru/forum/dom-window/66755-podschet-vybrannykh-chekboksov-radio-teksta.html)

jemlive19 08.01.2017 18:47
Подсчет выбранных чекбоксов, радио, текста
 
Добрый вечер. Мне нужна божья помощь, поэтому я пришел к вам. В общем, такая делема: "Поместите на форму флажки, несколько радиогрупп, несколько текстовых полей и кнопку. Флажки можно отмечать, а по нажатию на кнопку должно выводиться сообщение о количестве выбранных флажков, радиогрупп и заполненных текстовых полей. После этого заполненные поля становятся неактивными, поднятые флажки и радиокнопки становятся неактивными."

Так же уже накидал код:
Код:
<html>
  <head>
    <title>Пример использования полей input в HTML</title>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js">
</script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<span id="count"></span>
<p>Какие уроки интереснее всего?</p>
<p><label><input type="checkbox" name="lessons" value="HTML" id="count">HTML</label></p>
<p><label><input type="checkbox" name="lessons" value="CSS" id="count">CSS</label></p>
<p><label><input type="checkbox" name="lessons" value="PHP" id="count">PHP</label></p>
Нравится ли вам данный сайт?
<p><label><input type="radio" name="vopros" value="yes"> Да</label></p>
<p><label><input type="radio" name="vopros" value="no"> Нет</label></p>
<p><label><input type="radio" name="vopros" value="none" checked> Трудно ответить</label></p>
Текст
<input type="text" name="comment">
<input type="text" name="comment">

<script type="text/javascript">

    var count = 0;

    $(function() {
        displayCount();
        $('input[type=checkbox]').click(function() {
            if (this.checked) {
                count++;
            } else {
                count--;
            }
            displayCount();
        });
       
    });

    function displayCount() {
        $('#count').text(count);
    }

</script>
</body>
</html>
Подскажите пожалуйста, как это дело реализовать?

рони 08.01.2017 19:36
jemlive19,
<html>
  <head>
    <title>Пример использования полей input в HTML</title>
  <style type="text/css">
  .dis{
    color: #FF0000;
     cursor: pointer;
  }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js">
</script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<span id="count"></span>
<p>Какие уроки интереснее всего?</p>
<p><label><input type="checkbox" name="lessons" value="HTML" id="count">HTML</label></p>
<p><label><input type="checkbox" name="lessons" value="CSS" id="count">CSS</label></p>
<p><label><input type="checkbox" name="lessons" value="PHP" id="count">PHP</label></p>
Нравится ли вам данный сайт?
<p><label><input type="radio" name="vopros" value="yes"> Да</label></p>
<p><label><input type="radio" name="vopros" value="no"> Нет</label></p>
<p><label><input type="radio" name="vopros" value="none" checked> Трудно ответить</label></p>
Текст
<input type="text" name="comment">
<input type="text" name="comment">
<div class="dis">dis</div>

<script type="text/javascript">
$(function() {
    function count() {
        var check = $("input:checkbox:checked"),
            radio = $("input:radio:checked"),
            text = $("input:text").filter(function(i, v) {
                return v.value.trim()
            });
        $("#count").html("checkbox : " + check.length + "<br>radio : " + radio.length + "<br>text : " + text.length)
    }
    count();
    $("input").on("click input", count);
    $(".dis").on("click input", function() {
        count();
        $("input").attr("disabled", "disabled")
    })
});
</script>
</body>
</html>

jemlive19 08.01.2017 20:41
Спасибо огромное за ответ!)
Если можешь, подскажи пожалуйста, как сделать так, что бы при нажатии кнопки появлялось диалоговое окно (сообщение) в котором указаны о колве выбранных чекбоксов, радио и текста, а так же все становилось неактивным? (как в твоем решении при нажатии кнопки dis)

рони 08.01.2017 21:20
jemlive19,
http://jqueryui.com/dialog/
<html>
  <head>
    <title>Пример использования полей input в HTML</title>
  <style type="text/css">
  .dis{
    color: #FF0000;
     cursor: pointer;
  }
  .res{
     display: none;
  }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<div class="res" title="Информация"></div>
<p>Какие уроки интереснее всего?</p>
<p><label><input type="checkbox" name="lessons" value="HTML">HTML</label></p>
<p><label><input type="checkbox" name="lessons" value="CSS" >CSS</label></p>
<p><label><input type="checkbox" name="lessons" value="PHP" >PHP</label></p>
Нравится ли вам данный сайт?
<p><label><input type="radio" name="vopros" value="yes"> Да</label></p>
<p><label><input type="radio" name="vopros" value="no"> Нет</label></p>
<p><label><input type="radio" name="vopros" value="none" checked> Трудно ответить</label></p>
Текст
<input type="text" name="comment">
<input type="text" name="comment">
<div class="dis">dis</div>

<script type="text/javascript">
$(function() {
    function count() {
        var check = $("input:checkbox:checked"),
            radio = $("input:radio:checked"),
            text = $("input:text").filter(function(i, v) {
                return v.value.trim()
            });
      return  $(".res").html("checkbox : " + check.length + "<br>radio : " + radio.length + "<br>text : " + text.length)
    }
      $(".dis").on("click", function() {
        count().dialog();
        $("input").attr("disabled", "disabled")
    })
});
</script>
</body>
</html>


Часовой пояс GMT +3, время: 16:42.