Добавление и удаление DOM-свойств на jQuery

Содержание:
  1. Что такое DOM-свойства элементов
  2. Атрибуты disabled, checked, selected и т.п
  3. Методы jQuery для управления DOM-свойствами
  4. Пользовательские DOM-свойства
  5. Управление состоянием checked, disabled, selected через атрибуты
  6. Комментарии

В этой статье разберём методы jQuery для чтения, добавления, изменения и удаления DOM-свойств. На практике подробно остановимся на рассмотрении таких свойств как disabled, checked и selected.

Что такое DOM-свойства элементов

Когда браузер получает HTML-код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM-дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты - их свойствами. При этом значения DOM-свойств может отличаться от соответствующих им атрибутов. Почему так происходит, а также более подробно узнать про DOM-свойства и атрибуты, и чем они отличаются друг от друга, можно в этой статье.

В качестве заключения можно отметить, что в большинстве случаев нужно работать с этими сущностями как с DOM-свойствами, а операции с атрибутами оставлять только для реализации тех моментов в которых это действительно нужно.

Атрибуты disabled, checked, selected и т.п

Значения атрибутов (disabled, checked, selected, hidden, readonly и т.п.) отличиаются от соответствующим им DOM-свойств. При этом значение атрибута - это всегда строка, а DOM-свойства - нет. Разные DOM-свойства могут иметь разные типы данных. Например, DOM-свойства disabled, checked, selected и другие, подобные этим, имеют логический тип.

Как в этом случае определяется значение этих DOM-свойств? Этот процесс описан в стандарте. В ооответсвии с ним, значение этих DOM-свойств (disabled, checked и т.п.) равно true, когда такой атрибут присутсвует у тега и при этом не важно какое он имеет значение. В противном случае значения таких DOM-свойств равны false.

Методы jQuery для управления DOM-свойствами

В jQuery имеется два метода для управления DOM-свойствами элементов.

Первый метод - это prop.

Метод prop

Метод prop предназначен для выполнения различных операций над DOM-свойствами элементов.

Первая операция - это чтение значения DOM-свойства.

Синтаксис метода prop для получения значения DOM-свойства:

JavaScript
.prop( propertyName )
// propertyName - имя DOM-свойства, значение которого нужно получить

Пример, в котором рассмотрим принцип получения значения DOM-свойств с помощью метода prop:

JavaScript
<p id="introtext" class="intro">...</p>

<script>
// получим элемент
var intro = $('#introtext');
// выведем в консоль значение DOM-свойства id
console.log(intro.prop('id')); // "introtext"
// выведем в консоль значение DOM-свойства className
// при этом jQuery позволяет обращаться к этому DOM-свойству как по имени "class", так и по имени "className"
console.log(intro.prop('class')); // "intro"
console.log(intro.prop('className')); // "intro"
</script>

Но DOM-свойства для элементов создаются не только в соответствии с теми атрибутами, которые есть у каждого из них в HTML. Для каждого элемента в соответствии с его встроенным классом создаётся целый набор стандартных для него DOM-свойств. Например, для элемента input (его класс HTMLInputElement) создаётся один набор DOM-свойств, а для элемента a (его класс HTMLAnchorElement) создаётся немного другой, но стандартный уже для него набор DOM-свойств.

Пример, в котором изменим значения DOM-свойств элемента:

JavaScript
<input type="email" class="form-email" id="email" aria-describedby="emailHelp" placeholder="Введите email">
<a class="btn btn-warning" id="link" href="#" role="button">Сслыка</a>

<script>
// получим элементы
var email = $('#email');
var link = $('#link');

// выведем в консоль значение DOM-свойства type для элемента #email
console.log(email.prop('type')); // "email"
// выведем в консоль значение DOM-свойства href для элемента #link
console.log(link.prop('href')); // полный URL
// получим значение DOM-свойства checked для элемента #email (атрибут checked у данного элемента отсутствует)
console.log(email.prop('checked')); // false
// получим значение DOM-свойства autocomplete для элемента #email (атрибут autocomplete у данного элемента отсутствует)
console.log(email.prop('autocomplete')); // ""
// получим значение DOM-свойства tagName (имя тега), данное свойство есть у каждого элемента в DOM (в HTML атрибута соответствующего этому свойству нет)
console.log(email.prop('tagName')); // "INPUT"
console.log(link.prop('tagName')); // "A"

// при попытке получить значение DOM-свойства, которого нет у элемента в DOM, будет возвращено undefined (это можно использовать для проверки наличия определённого DOM-свойства у элемента)
console.log(link.prop('checked')); // undefined
</script>

Воторая операция - это изменение значения DOM-свойства.

Синтаксис метода prop для установления DOM-свойству нового знчаения:

JavaScript
.prop( propertyName, value )
// propertyName - имя DOM-свойства, значение которому нужно установить
// value - значение, которое нужно установить DOM-свойству
Кроме этого варианта jQuery предлагает ещё два:
JavaScript
// Вариант № 2 (предназначен для установки сразу нескольских DOM-свойств элементу)
.prop( properties )  
// properties - это объект, состоящий из набора пар свойство-значение:
// {
//   'имя_DOM-свойства': 'значение',
//   'имя_DOM-свойства': 'значение',
//   ... 
// }

// Вариант № 3 (предназначен для установки DOM-свойства такого значения которое вернёт функция)
.prop( propertyName, function )  
// propertyName - имя DOM-свойства, значение которому нужно установить
// function - функция, которая будет определять значение DOM-свойства (это значение будет тем, которая она вернёт в результате своего выполнения). 
// синтаксис функции:
// Function( Integer index, Anything oldPropertyValue ) => Anything
// на вход она получает:
//   index - индекс элемента в наборе
//   oldPropertyValue - текущее (старое) значение DOM-свойства
// внутри функции ключевое слово this указывает на текущий элемент набора

Пример, в котором изменим значения DOM-свойств элементов:

JavaScript
<input type="text" class="form-input" id="input-1" disabled>
<input type="text" class="form-input" id="input-2" disabled>

<script>
// получим элемент #input-1
var input1 = $('#input-1');

// Вариант №1
// изменим значение DOM-свойства type на file
input1.prop('type', 'file');
// изменим значение DOM-свойства disabled на false
input1.prop('disabled', false);

// Вариант №2
input1.prop({
  'type': 'file',
  'disabled': false
})
</script>

Пример, в котором установим заголовкам h2 и h3, находящихся в элементе .article, идентификаторы, если их у данных элементов нет:

HTML
<div class="article">
  <h2>...</h2>
  ...
  <h2>...</h2>
  ...
  <h3>...</h3>
  ...
</div>

<script>
var headers = $('.article').find('h2, h3');
headers.prop('id', function (index, oldPropertyValue){
  if (!oldPropertyValue) {
    return 'header-' + index;
  }
});
</script>

Удалить стандартное DOM-свойство у элемента нельзя. Но вы можете установить ему значение по умолчанию.

Пример, в котором установим для некоторого элемента, например button, значение DOM-свойства равным false.

HTML
<button id="btn" disabled>Кнопка</button>

Сейчас данный элемент в качестве значения DOM-свойства disabled имеет значение true, т.к. атрибут disabled присутствует у тега.

// значение DOM-свойства disabled
console.log($('#btn').prop('disabled')); // true
// значение атрибута disabled
console.log($('#btn').attr('disabled')); // ""

Теперь установим данному DOM-свойству значение false. Это изменение также повлияет на соответствующий ему атрибут. Он будет убран у элемента.

// установим DOM-свойству disabled значение false
console.log($('#btn').prop('disabled', false)); 
// получим значение атрибута disabled
console.log($('#btn').attr('disabled')); // undefined

Пример, в котором переведём кнопку submit в активное состояние (т.е. установим ей свойство disabled равное false) когда содержимое элемента input[name="search"] не будет равно пустой строке:

<form action="search.php">
  <input type="text" name="search">
  <input type="submit" value="Отправить">
</form>
  
<script>
// после загрузки страницы
$(function() {
  // установим кнопки submit DOM-свойство disabled со значением true (т.е. сделаем её не активной) 
  $('input[type="submit"]').prop('disabled', true);
  // при отпускании клавиши, проверим значение данного поля
  $('input[name="search"]').keyup(function() {
    // если значение не равно пустой строке
    if($(this).val() !== '') {
      // то сделаем кнопку активной (т.е. установим свойству disabled значение false)            
      $('input[type="submit"]').prop('disabled', false);
    }
  });
});
</script>

Принцип работы с checked ничем не отличается от disabled.

Примеры работы с checked

1. Пример, в котором установим флажок checkbox, а затем снимем его у него через 5 секунд:

HTML
<!-- Чекбокс -->
<input type="checkbox" name="agree" id="agree">

<script>
  // переведем checked во включенное состояние (установим флажок)
  $('#agree').prop('checked', true);
  setTimeout(function () {
    // переведём checked в выключенное состояние (уберём флажок)
    $('#agree').prop('checked', false);
  }, 5000);
</script>

2. Пример, в котором будем перед отправкой формы проверять состояния checkbox #agree, и если он не установлен в true, то выводить некоторое сообщение и отменять отправку формы на сервер.

HTML
<form id="register" action="register.php" method="post" autocomplete="off">
  ...
  <input name="eula_accepted" id="eula_accepted" type="checkbox">
  <label for="eula_accepted">
    Нажимая на кнопку "Зарегистрироваться", я принимаю условия Пользовательского соглашения
  </label>
  <div id="error-eula" style="display:none">
    Для продолжения вы должны принять условия Пользовательского соглашения
  </div>
  <button type="submit">Зарегистрироваться</button>
</form>

<script>
// при отправке формы на сервер
$('#register').submit(function (e) {
  // если ли значение DOM-свойства checked равно false...
  if ($(this).find('#eula_accepted').prop('checked') === false) {
    // то отобразим сообщение о том, что вы должны принять условия пользовательского соглашения
    $('#error-eula').css('display', 'block');
    // отменим отправку форму на сервер
    e.preventDefault();
  } else {
    $('#error-eula').css('display', 'none');
  }
});
</script>

3. Пример, в котором выполним две операции, связанные с checked. Первое - это установим после загрузки страницы второму элементу radio состояние checked, равное true. Второе - это создадим обработчик для события change, который будет выводить в #log значение выбранного переключателя:

HTML
<!-- radio-элементы -->
<label>
  <input type="radio" checked="checked" name="web" value="HTML">
  HTML
</label>
<label>
  <input type="radio" name="web" value="CSS">
  CSS
</label>
<label>
  <input type="radio" name="web" value="JavaScript">
  JavaScript
</label>
<!-- #log -->
<div id="log"></div>

<script>
var web = $('input[name="web"]');
// установим второму элементу в наборе (с индексом 1) значение true для DOM-свойства checked 
web.eq(1).prop('checked', true);
// обработчик события при изменении выбранного checkbox 
web.change(function () {
  // получим значение элемента с состоянием checked
  var value = $('[name="web"]:checked').val();
  // вывести это значение в #log
  $('#log').text(value + ' is checked');
});
</script>

Пример работы с selected

Пример, в котором выполним несколько действий. Первое - это установим состояние selected второму option. Второе - это создадим обработчик для события change, который будет выводить в #log выбранный пункт.

HTML
<select id="list">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
</select>
<div id="log"></div>

<script>
  // установим второму option значение DOM-свойству selected равное true
  $('#list option:nth-child(2)').prop('selected', true);
  // обработчик события change, который будет выводить в #log выбранный пункт
  $('#list').change(function () {
      $('#log').text($('#list').prop('value') + ' - selected');
  })
</script>

Пользовательские DOM-свойства

Элементы в DOM не ограничиваются перечнем только стандартных (встроенных) для каждого из них свойств. К любому элементу в DOM пользователь может добавить свои собственные свойства.

По сути, DOM элементы (узлы) – это обычные объекты JavaScript. Следовательно, к ним, как и к любым другим объектам можно добавлять свои свойства.

Осуществляется это также с помощью метода prop. Данный метод используется, когда нужно добавить, изменить или прочитать пользовательское DOM-свойство.

Рассмотрим добавление собственного DOM-свойства к элементам на следующем примере.

В этом примере добавим к элементам .counter пользовательское DOM-свойство count, которое будем использовать для хранения количество нажатий (click-ов):

HTML
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>

<script>
var 
  counters = $('.counter'), // получим все кнопки
  defaultButtonText = 'Нажми на меня'; // текст кнопки по умолчанию
// добавим ко всем кнопкам DOM-свойство count со значением 0.
counters.prop('count', 0);
// добавим обработчик события click для каждой кнопки (при нажатии на кнопку будем увеличивать значение его DOM-свойства count на 1)
counters.click(function(){
  // сохраним текущее значение DOM свойства count в переменную count
  var count = $(this).prop('count');
  // увеличим значение переменной count на 1
  count++;
  // сохранить значение переменной count в пользовательское DOM-свойство count этого элемента
  $(this).prop('count',count);
  // изменим текст текущей кнопки
  $(this).text(defaultButtonText + ': ' + count);
});
</script>

Пользовательские DOM-свойства не отображаются в HTML коде и ни каким образом не сказываются отрисовку этого элемента на странице.

Удаление пользовательского DOM-свойства у элемента осуществляется с помощью метода removeProp.

Синтаксис метода removeProp:

.removeProp( propertyName )
// propertyName (тип: Строка) - свойство, которое нужно удалить

Данный метод предназначен исключительно для удаления собственных DOM-свойств. Удалить стандартные (встроенные) DOM-свойства у элементов нельзя, вы можете им просто установить значение по умолчанию.

Пример, в котором будем добавлять и удалять у элемента #paragraph пользовательское DOM-свойство при нажатии соответственно на ту или иную кнопку:

HTML
<p id="paragraph"></p>
<button id="add-custom-property">Добавить DOM-свойство myProp к элементу #paragraph</button>
<button id="remove-custom-property">Удалить DOM-свойство myProp у элемента #paragraph</button>
  
<script>
// при нажатию на кнопку с #add-custom-property
$('#add-сustom-property').click(function(){
  // добавим к элементу #paragraph свойство myProp
  $('#paragraph').prop('myProp', 'Этот текст является значением DOM-свойства myProp');
  // выведим в качестве контента элементв #paragraph значение свойства myProp
  $('#myParagraph').text($('#myParagraph').prop('myProp'));
});
// при нажатию на кнопку с #remove-custom-property
$('#remove-custom-property').click(function(){
  // удалим у элемента #paragraph свойство myProp
  $('#paragraph').removeProp('myProp');
  // вывести сообщение о том, что свойство myProp не существует
  if ($('body').prop('myProp') === undefined ) {
    $('#paragraph').text('У элемента нет DOM-свойства myProp!');
  }
});
</script>

Управление состоянием checked, disabled, selected через атрибуты

Изменять состояние checked, disabled, selected более предпочтительно через соответствующее DOM-свойство.

Но, тем не менее можно выполнять это и через атрибуты.

Например, чтобы перевести кнопку в неактивное состояние (disabled), ей нужно просто добавить атрибут disabled.

<button id="btn">Кнопка</button>

<script>
// добавим атрибут disabled
$('#btn').attr('disabled', '');
</script>

Для выполнения обратного действия, перевода элемента в активное состояние у него нужно удалить этот атрибут:

JavaScript
// удалим атрибут disabled
$('#btn').removeAttr('disabled');

Для управления состоянием checked, readonly необходимо выполнять аналогичные действия.

В приведённом выше примере мы добавляли и удаляли атрибут disabled у элемента. При этом браузер при изменении атрибута изменял и значение соответствующему ему DOM-свойству. Т.е. при добавлении атрибута disabled устанавливал соответствующему DOM-свойству в данном случае disabled значение true, а при удалении этого атрибута – устанавливал false.

Браузер также при изменении значения DOM-свойства элемента, изменяет и его атрибут. Для DOM-свойств с логическим типом это работает так, с другими по-другому. Например, с id, class и style изменения происходяи один к одному, а например, с value изменения один к одному не работают.

Статья, которая может быть вам также интересной:

Работа с атрибутами HTML-элементов в jQuery с помощью методов attr и removeAttr.

Комментарии: 15

Ksenya
Ksenya

Добрый вечер! изучаю JS, помогите решить задачу

Создать html-страницу с формой для ввода стилизованного

текста. После заполнения формы, вывести текст на экран в соответствии с указанными стилями.

Как сделать, если выбираешь в чек боксе жирный шрифт или выровнить текст то он отображался в сообщении. Я прикрепила скриншоты своего кода.
Александр Мальцев
Александр Мальцев

Добрый день! Если правильно понял задание, то так: https://codepen.io/itchief/pen/abaeXRq

Анна
Анна
Добрый день, только изучаю JS, помогите решить задачу
Сделайте интерфейс из трех кнопок, на черном фоне страницы. Клик по первой
кнопке пусть делает фон немного краснее, клик по второй – немного зеленее, клик
по третьей – немного синее. Насколько именно синее, краснее и зеленее делать
фон – остается на ваше усмотрение, но можете ориентироваться примерно так:

если изначально фон черный (#000), то после клика по “красной” кнопке он должен
стать (#100) и так далее.
Заранее спасибо
Александр Мальцев
Александр Мальцев
Привет! Пример кода:
<style>
  body {
    background-color: #000;
  }
</style>

<button type="button" id="red">Red</button>
<button type="button" id="green">Green</button>
<button type="button" id="blue">Blue</button>

<script>
  const bodyBgColor = {
    red: 0,
    green: 0,
    blue: 0,
    increaseColor(color) {
      this[color] = this[color] + 5 > 255 ? 255 : this[color] + 5;
      this.set();
    },
    set() {
      document.body.style.backgroundColor = `rgb(${this.red}, ${this.green}, ${this.blue})`;
    }
  }
  document.addEventListener('click', (e) => {
    if (e.target.id === 'red' || e.target.id === 'green' || e.target.id === 'blue') {
      bodyBgColor.increaseColor(e.target.id);
    }
  });
</script>
Анна
Анна
Спасибо, большое
Эрик
Эрик
Здравствуйте. Есть select со значением. По нажатию выполняется подмена значения в сессии и переход на главную страницу. Проблема заключается в том, что допустим в селекте два значения. При входе на сайт автоматически выбран первый и это правильно. Но когда я выбираю второй, при обновлении страницы значение по умолчанию остается от первого элемента. В чем может быть проблема и как её можно решить? Желательно без js. Код оставлю ниже.
<select class="form-control select2" data-placeholder="Choose country" style="width: 200px; margin-top: 10px;" onchange="window.location.href=this.options[this.selectedIndex].value">
<?php foreach ($_SESSION['ls_cards'] as $k => $card) {
  $id = $k+1;
  $str = $card['STREET'] . ', '.$card['HOUSE'] . '/'.$card['FLAT']; ?>
  <option value="/info/nomer/<?=$id?>"><?php echo $str; ?></option>
<?php }
?>
</select>
Александр Мальцев
Александр Мальцев
Здравствуйте.
Для решения этой задачи вам нужно как-то передать на сервер индекс выбранного пункта в select.
Например, если вы его передаёте в адресе, то можно его взять оттуда:
/info/nomer/1 - id = 1 (индекс 0)
/info/nomer/2 - id = 2 (индекс 1)

Если нет, то передать индекс выбранного пункта в select можно с помощью GET-параметра:
<?php
if (isset($_GET['current'])) {
  $currentIndex = $_GET['current'];
} else {
  $currentIndex = 0;
}
?>

<select class="form-control select2" data-placeholder="Choose country" style="width: 200px; margin-top: 10px;" onchange="window.location.href = this.options[this.selectedIndex].value + '?current=' + this.selectedIndex">
  <?php foreach ($_SESSION['ls_cards'] as $k => $card) {
    $id = $k + 1;
    $str = $card['STREET'] . ', ' . $card['HOUSE'] . '/' . $card['FLAT']; ?>
    <option value="/info/nomer/<?= $id ?>" <?php if ($k = $currentIndex) { echo "selected";} ?>><?php echo $str; ?></option>
  <?php }
?>
</select>
Эрик
Эрик
Индекс выбранного пункта в select у меня живет в сессии. Высчитываю его так: $_SESSION['active_ls_cards'] = $id-1
Эрик
Эрик
Получилось. Спасибо Вам.
Александр Мальцев
Александр Мальцев
Тогда можно использовать её.
<?php
if (isset($_SESSION['active_ls_cards'])) {
  $currentIndex = $_SESSION['active_ls_cards'];
} else {
  $currentIndex = 0;
}
Эрик
Эрик
Так и сделал. Спасибо.
Архаил
Архаил
Добрый день, подскажите как правильно обработать несколько select в форме, написал код, но он отрабатывает немного не правильно. У меня в подгружаемом ajax-ом select, значение при выборе меняется на выбранное, но тут же меняет его на значение первого элемента в select. Мне необходимо выдавать контент ajax-ом, по выбору пользователя, из подгруженного ajax-ом select, выдавать еще select. В итоге в форме возможно будет до 4-5 select, три из которых поочередно будут подгружаться ajax. Но из-за ошибки, решение задачи приостановилось, поделитесь советом или направьте в нужном направлении.
код в php выводит на страницу:
		echo '<form name="choice">
			<select  class="selectStyleForm o_style" name="active_id_obj" required>';
		echo ' <optgroup>';
		echo '<option disabled selected>Выберите объект:</option>';
		echo '</optgroup>';
		func_object_all($code_obj);
	echo '</select>';
	echo '<select class="selectStyleForm o_style o_s_fll" name="soon_id_obj">';
		echo '<optgroup>';
			echo '<option disabled selected>Выберите категорию:</option>';
			echo '</optgroup>';
			func_object_all($code_obj);
		echo '</select><div name="select_result_ajax" class="o_s_fll"></div>';
	echo '</section>';
		echo '<input type=submit  name="o_add_save" value="Сохранить Данные" class="o_style banner_button">';	
		echo '</form>';
echo '</section>';
сам js скрипт:
$(function () {
	var $active_id_obj = $(document.choice.active_id_obj),
		$soon_id_obj = $(document.choice.soon_id_obj),
		$result = $('div[name="select_result_ajax"]');

	$(document).on('change', [$active_id_obj, $soon_id_obj], show);
	show();

	function show () {
		var active_id_obj = $active_id_obj.val(),
			soon_id_obj = $soon_id_obj.val();
		if(!soon_id_obj){
                $('div[name="select_result_ajax"]').html('');
        }else{
                $.ajax({
                        type: "POST",
                        url: "obj_ajax.php",
                        data: { action: 'resultBannerInsert', active_id_obj: active_id_obj, soon_id_obj: soon_id_obj },
                        cache: false,
                        success: function(responce){ $('div[name="select_result_ajax"]').html(responce); }
                });
        }
	}
});
код в файле обрабатывающий ajax запрос:
switch ($_POST['action']){
                
        case "resultBannerInsert":
                        $father = substr($_POST['active_id_obj'], 3); 
                        $soon = substr($_POST['soon_id_obj'], 3); 

                echo '<select class="selectStyleForm o_style" name="id_prod_bann">';
                echo '<optgroup>';
                        echo '<option disabled selected>Выберите пункт:</option>';
                        echo '</optgroup>';
                $q = "SELECT * FROM `object` WHERE IDH = ".$soon ;
                $rs = mysql_query($q);
                while($row = mysql_fetch_assoc($rs)){
                        $sql = "SELECT * FROM `".$row['key']."` ";
                        $res = mysql_query($sql);
                        while($row2 = mysql_fetch_assoc($res)){
                                echo '<option value="pk_'.$row2['id'].'"  class="o_style">'.$row2['name'].'</option>';
                        }
                        
                }
                echo '</select>';
                break;
        
        
};
Архаил
Архаил
Добрый День, делаю фильтр продуктов на сайте, имеются несколько checkbox, при выборе любого должен передавать на сервер данные, обрабатывать их и возвращать результат, и если будут выбраны несколько чекбоксов, то должен буду получить в JS данные с выбранных и также отправить их на сервер методом Ajax. Возник вопрос на стороне JS, так как делаю первый раз фильтр для сайта, при выборе чекбокса будут обрабатываться данные Ajax и на сайте появляться результат выборки(кнопка «Отправить» отсутствует) как правильно обработать чекбоксы, передавать данные в JS с помощью onClick=«filter(); return false;»? или другим методом? Подскажите как правильнее работать с чекбоксами в JS, или поделитесь ссылками где можно ознакомится более подробно с обработкой нескольких чекбоксов и правильной передачей данных. Премного благодарен за любой совет!
Александр Мальцев
Александр Мальцев
Добрый день!
Обработку изменения состояний чекбоксов можно организовать с помощью события change. Как это выполнить подробно приведено ниже (в виде примера).

Пример HTML кода (для клиента):
<input class="parameters" id="parameter-1" type="checkbox">
<input class="parameters" id="parameter-2" type="checkbox">
<!-- Элемент для примера (в него будем выводить результат, полученный с сервера -->
<div id="result"></div>

<script>
// при изменении checkbox
$('.parameters').change(function(){
    // данные для отправки на сервер через AJAX
    var data = {
        'parameter-1': $('#parameter-1').prop('checked'),
        'parameter-2': $('#parameter-2').prop('checked'),
    }
$.post({
    url: 'test.php',
    data: data})
    .done(function (data) {
        $('#result').text(data);
    });
});
</script>
Пример php-кода (для сервера):
<?php
if (!isset($_POST['parameter-1']) || !isset($_POST['parameter-2'])) {
    exit();
}
$parameter1 = filter_var($_POST['parameter-1'], FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
$parameter2 = filter_var($_POST['parameter-2'], FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);

if ($parameter1===true) {
    $parameter1_output = 'Параметр 1 установлен';
} elseif ($parameter1===false) {
    $parameter1_output = 'Параметр 1 не установлен';	
} else {
    $parameter1_output = 'Параметр 1 имеет не корректное значение';
}

if ($parameter2===true) {
    $parameter2_output = 'Параметр 2 установлен';
} elseif ($parameter2===false) {
    $parameter2_output = 'Параметр 2 не установлен';	
} else {
    $parameter2_output = 'Параметр 2 имеет не корректное значение';
}

$output = $parameter1_output .'; ' . $parameter2_output;
echo $output;
Архаил
Архаил
Благодарю, сейчас попробую использовать!