#javascript #html #oracle-apex
#javascript #HTML #oracle-apex
Вопрос:
Есть много сообщений о динамической проверке / снятии флажков, но я полагаю, что мой немного отличается. Мой флажок — флажок множественных значений (я использую его для параметризации графика), куда данные поступают из запроса, например:
select 'all' as val from dual
union
select name_of_month as val from months
Таким образом, в результате получается 13 флажков: [0] (все) [1] — [12] (январь февраль март и т.д.)
То, что я хотел бы получить, приведено ниже поведения
- когда я проверю (все), все 13 флажков будут проверены
- когда я сниму флажок (все), все 13 флажков будут сняты
- когда я снимаю один из 1-12 флажков и (все) проверяется, флажок будет снят
- когда все 12 флажков будут установлены один за другим, флажок также будет установлен
Я не уверен, достаточно ли ясно приведенное выше описание, но я полагаю, вы чувствуете, как должен работать этот флажок
ОБНОВЛЕНИЕ: я администратор базы данных Oracle (с базовыми знаниями JavaScript), который пытается создать что-то в APEX. Пока я не использую wizzards и мышь для рисования объектов, это легко. Прямо сейчас я вижу, что мне нужно ввести несколько строк кода, поэтому, пожалуйста, дайте мне хотя бы какое-то объяснение, где его ввести и как запустить, чтобы оно работало.
Комментарии:
1. Используете ли вы jQuery в своем проекте? или вы просто хотите добиться этого с помощью ванильного JavaScript?
2. Я не знаю, как вы создаете эти флажки, но если они являются элементами. Используя решение Jakir, вам необходимо создать динамическое действие при загрузке страницы с помощью этого javascript. А затем перейдите к вашему флажку «ВСЕ» и в поле Пользовательские атрибуты поместите >>> class=»all_chkbox» <<< и в каждом элементе поместите >>> class=»chkbox» <<< пример: apex.oracle.com/pls/apex/f?p=145797:1
Ответ №1:
Вы можете легко сделать это с помощью jquery. Я сделал пример кода для вашего проекта. Надеюсь, это поможет.
$( document ).ready(function() {
$('.all_chkbox').change(function(){
if($(this)[0].checked){
$('.chkbox').prop("checked", true);
}else{
$('.chkbox').prop("checked", false);
}
});
$('.chkbox').change(function(){
var flag = true;
$('.chkbox').each(function(){
if(!$(this)[0].checked){
flag = false;
return;
}
});
$('.all_chkbox').prop("checked", flag);
});
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="checkbox_wrapper">
<input class="all_chkbox" type="checkbox">
<ul>
<li>checkbox 1 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 2 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 3 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 4 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 5 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 6 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 7 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 8 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 9 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 10 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 11 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 12 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 13 <input class="chkbox" type="checkbox" name="" ></li>
</ul>
</div>
</body>
</html> Ответ №2:
Я сделал это в своем проекте React, сценарий немного отличается, но, возможно, это вам поможет…..
Итак, это мой элемент checkbox, который вы можете реплицировать в соответствии с вашими потребностями :
<input type="checkbox" checked={this.isChecked(props.original.EmployeeId)} onChange={this.singleChange.bind(this, props.original.EmployeeId)}
isChecked = (empId) => {
let checkedItems = this.state.checkItems;
return checkedItems.indexOf(empId) > -1;
}
singleChange = (employeeId, event) => {
let checkedItems = this.state.checkItems;
if (event.target.checked) {
checkedItems.push(employeeId);
}
else {
if (checkedItems.includes(employeeId)) {
let index = checkedItems.indexOf(employeeId);
checkedItems.splice(index, 1);
}
}
checkedItems.length == this.props.employees.length ? this.setState({ allChecked: true }) : this.setState({ allChecked: false })
this.setState({ checkItems: checkedItems })
}
Здесь я поддерживаю массив, который содержит EmployeeID тех сотрудников, которых я буду проверять, поэтому IsChecked — это функция, которая проверяет, что сотрудник проверен, или относительно вы можете сказать, что флажок установлен или нет.
Функция singleChange() вызывается во время события onChange, которое предназначено только для вставки и удаления идентификатора из массива, если флажок установлен или снят соответственно.
Но в соответствии с вашим сценарием здесь важна вторая последняя строка кода, которая проверяет, все ли проверены или нет. Итак, если вы снимете один флажок, все флажки будут сняты, если вы установите один за другим все флажки, тогда (все) флажок будет установлен автоматически. Для (всех) одного флажка вам придется поддерживать логическую переменную.
<input type="checkbox" checked={this.state.allChecked} onChange={this.allChecked}></input>
allChecked = (event) => {
const allEmployeeIds = this.props.employees.map(employee => employee.EmployeeId);
if (event.target.checked) {
this.setState({ checkItems: allEmployeeIds });
this.setState({ allChecked: true })
}
else {
this.setState({ checkItems: [] });
this.setState({ allChecked: false });
}
}
Этот элемент ввода выше — мой флажок выбрать все. Он проверяется на основе логической переменной all проверено. Здесь функция allChecked вызывается при запуске события onChange. Если флажок установлен, эта функция поместит все идентификаторы в тот же массив, который использовался выше, и если флажок снят, массив станет пустым.
Не путайте с состоянием и другими свойствами, поскольку я сделал это в react. Возможно, это вам поможет. Не стесняйтесь спрашивать, если застряли