Форум

DarknesS · #1 (**permalink**) 29.06.2016, 22:40

Все доброй ночи

Есть некий код, для подсчета кол-ва чекбоксов

$(document).ready(function(){
$(':checkbox').on('change', function(){
    $('#count').text($(':checkbox:checked').length);
    $("#count").fadeIn("slow");

});
});

Есть див для вывода кол-ва

<div hidden=\"true\" style=\"position: fixed;.....\" id=\"count\"></div>

Возникли 2 вопроса:
1) Как в этот код вставить какое-нибудь слово, ну к примеру возьмем отмеченных $('#count').text($(':checkbox:checked').length);
получится должно типа того "отмеченных: 3", сейчас имеем просто цифру
2) По умолчанию без отметки див у нас скрытый . при отметке у нас он появляется, но если отмеченных нету, то он все равно виден.
вопрос: как написать правильно код: если отмеченных меньше 1 то скрываем

Спасибо заранее

Rasy · #2 (**permalink**) 29.06.2016, 23:17

$(':checkbox').on('change', function(){
    var a = $(':checkbox:checked').length;
    if (!a) {
      $('#count').text('Отмеченных: ' + a).fadeOut("slow");
      return;
    }
   $('#count').text('Отмеченных: ' + a).fadeIn("slow");
});

Царь Леонид · #3 (**permalink**) 29.06.2016, 23:38

Ишшо вариант, для разнообразия так скаать

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
  <div id="result"></div>
</body>
  <script>
    
const el = document.querySelectorAll('input[type=checkbox]');
const result = document.getElementById('result');
function setResult(text){
  result.innerText = text
}
var count = 0;
for (var item of el) {
  item.addEventListener('change',(e) => {
    e.target.checked ? count ++ : count--
    let divText = count > 0 ? `Всего чекбоксов: ${count}` : null
    setResult(divText)
  })
}
  </script>
</html>

DarknesS · #4 (**permalink**) 30.06.2016, 00:52

Спасибо большое)

А как сюда id checkbox'а вставить?

$(document).ready(function(){
$(':checkbox').on('change', function(){
 var a = $(':checkbox:checked').length;
 if (!a) {
 $('#count').html('Отмеченных: ' + a + '&nbsp;<select name=\"actions\"><option selected>---</option>\n<option value=\"visible_yes\">Показать</option>\n<option value=\"visible_no\">Скрыть</option>\n</select><input type=\"submit\" class=\"log_input\" value=\"ОK\"/>').fadeOut("slow");
 return;
 }
 $('#count').html('Отмеченных: ' + a + '&nbsp;<select name=\"actions\"><option selected>---</option>\n<option value=\"visible_yes\">Показать</option>\n<option value=\"visible_no\">Скрыть</option>\n</select><input type=\"submit\" class=\"log_input\" value=\"ОK\"/>').fadeIn("slow");
});
});

К примеру есть список в каждом значении:
<input type=\"checkbox\" name=\"cheKer[]\" value=\"".$row["id"]."\" />

При нажатии появляется модальное окно с селектом. Там, в модальном окне, идет передача данных id какие скрыть или показать

Царь Леонид · #5 (**permalink**) 30.06.2016, 11:53

Добавьте в любом месте

'+ $(this).attr("id") +'

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="checkbox" id="a3">
  <input type="checkbox" id="a1">
  <input type="checkbox" id="a2">
  <div id="count"></div>
</body>
  <script>
    $(document).ready(function(){
$(':checkbox').on('change', function(){
 var a = $(':checkbox:checked').length;
 if (!a) {
 $('#count').html('Отмеченных: ' + a + '&nbsp;<select name=\"actions\"><option selected>---</option>\n<option value=\"visible_yes\">Показать</option>\n<option value=\"visible_no\">Скрыть</option>\n</select><input type=\"submit\" class=\"log_input\" value=\"ОK\"/>').fadeOut("slow");
 return;
 }
 $('#count').html('Отмеченных: ' + a + '&nbsp;'+ $(this).attr("id") +'<select name=\"actions\"><option selected>---</option>\n<option value=\"visible_yes\">Показать</option>\n<option value=\"visible_no\">Скрыть</option>\n</select><input type=\"submit\" class=\"log_input\" value=\"ОK\"/>').fadeIn("slow");
});
});

  </script>
</html>

Кстати, экранировать кавычки не обязательно

DarknesS · #6 (**permalink**) 30.06.2016, 16:28

Что-то все равно не то

<input type=\"checkbox\" id=\"cheKer[]\" name=\"cheKer[]\" value=\"".$row["id"]."\" />

Вот мой весь код:

$(document).ready(function(){
$(':checkbox').on('change', function(){
 var a = $(':checkbox:checked').length;
 if (!a) {
 $('#count').html('Отмеченных: ' + a + '&nbsp;<form style=\"display: inline-block;\" method=\"post\" name=\"cheKer\" action=\"video_log_act.php?action=do\"><select style=\"width:70px;margin-right:3px;padding:2px;font:12px Arial,sans-serif;\" name=\"actions\"><option selected>---</option>\n<option value=\"visible_yes\">Показать</option>\n<option value=\"visible_no\">Скрыть</option>\n</select><input type=\"submit\" class=\"log_input\" value=\"ОK\"/></form>').fadeOut("slow");
 return;
 }
 $('#count').html('Отмеченных: ' + a + '&nbsp;'+ $(this).attr("cheKer[]") + '<form style=\"display: inline-block;\" method=\"post\" name=\"cheKer\" action=\"video_log_act.php?action=do\"><input type=\"hidden\" name=\"cheKer[]\" value="$id"><select style=\"width:70px;margin-right:3px;padding:2px;font:12px Arial,sans-serif;\" name=\"actions\"><option selected>---</option>\n<option value=\"visible_yes\">Показать</option>\n<option value=\"visible_no\">Скрыть</option>\n</select><input type=\"submit\" class=\"log_input\" value=\"ОK\"/></form>').fadeIn("slow");
});
});

При отметке появляется - Отмеченных: 1 undefined

вместо var a = $(':checkbox:checked').length; кажется надо проверку id сделать

Форум

Справочник

Discord чат

Курсы javascript