Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2017, 18:47
Новичок на форуме
Отправить личное сообщение для jemlive19 Посмотреть профиль Найти все сообщения от jemlive19
 
Регистрация: 08.01.2017
Сообщений: 3

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

Так же уже накидал код:
Код:
<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>
Подскажите пожалуйста, как это дело реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2017, 19:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2017, 20:41
Новичок на форуме
Отправить личное сообщение для jemlive19 Посмотреть профиль Найти все сообщения от jemlive19
 
Регистрация: 08.01.2017
Сообщений: 3

Спасибо огромное за ответ!)
Если можешь, подскажи пожалуйста, как сделать так, что бы при нажатии кнопки появлялось диалоговое окно (сообщение) в котором указаны о колве выбранных чекбоксов, радио и текста, а так же все становилось неактивным? (как в твоем решении при нажатии кнопки dis)
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2017, 21:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>

Последний раз редактировалось рони, 08.01.2017 в 21:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсчет количества выбранных чекбоксов и радио jemlive19 Элементы интерфейса 0 08.01.2017 18:46
Сделать с чекбоксов радио malevi4 Общие вопросы Javascript 6 03.01.2017 12:05
Подсчет суммы чисел при отметке чекбоксов Garik Элементы интерфейса 11 27.07.2013 21:47
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02
Подсчет "реальной" длины текста в textarea modernx Элементы интерфейса 22 06.06.2010 18:30