Как установить все флажки с помощью JavaScript в строке таблицы, создаваемой PHP
Я новичок в PHP. Я хочу создать скрипт для проверки всех флажков подряд, но я застрял.
ПРОБЛЕМА
Код не работает с циклом.
Вот мой вывод
Когда я устанавливаю флажок в столбце Мнение, я хочу автоматически установить все флажки в одной строке.
Вот мой код
Для отображения данных и флажков для каждой строки я использую PHP на стороне сервера цикл
JavaScript-код:
<script>
$('.allcb').on('click', function() {
$(this).parent().parent().parent().parent().find('.chk').prop('checked', this.checked);
});
</script>
HTML:
<?php
for ($i=0; $i<count($opinion); $i++) {
//if ($opinion[$i] == "")continue;
?>
<tr>
<td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->
<input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
<?php
}
?>
7 answers
Простым способом было бы, если бы вы добавили к себе какой-нибудь идентификатор TR
, чтобы checkbox
"знал", какие флажки находятся в одной строке.
Это также можно было бы сделать, проверив родительские узлы, но это может быть немного нестабильным (подумайте, например, о реструктуризации таблицы).
function toggleRowCbs(cb) {
var cbs = document.getElementById(cb.dataset.rowid).querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function(x) {
x.checked = cb.checked;
});
}
table,
tr,
td,
th {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: left;
padding: 2pt 4pt;
}
<table>
<tr>
<th>Optionion</th>
<th>Action</th>
<th colspan="4">Ratings</th>
<th>Outlook</th>
<th>Rating Type</th>
</tr>
<tr>
<th></th>
<th></th>
<th colspan="2">Long Term</th>
<th colspan="2">Short Term</th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th>Current</th>
<th>Previous</th>
<th>Current</th>
<th>Previous</th>
<th></th>
<th></th>
</tr>
<tr id="row1">
<td>
<input type="checkbox" data-rowid="row1" onchange="toggleRowCbs(this)" />Foobar
</td>
<td>
<input type="checkbox" />Maintain
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />Stable
</td>
<td>
<input type="checkbox" />Entity
</td>
</tr>
<tr id="row2">
<td>
<input type="checkbox" data-rowid="row2" onchange="toggleRowCbs(this)" />Foobar #2
</td>
<td>
<input type="checkbox" />Maintain
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />Stable
</td>
<td>
<input type="checkbox" />Entity
</td>
</tr>
</table>
Таким образом, ваш PHP-код будет выглядеть следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
for ($i=0; $i<count($opinion); $i++) { ?>
<tr id="row<?php echo $i ?>">
<td>
<input type="checkbox" data-rowid="row<?php echo $i ?>" onchange="toggleRowCbs(this)" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
<?php } ?>
Потому что это ванильное решение JavaScript, которое использует querySelectorAll
, dataset
и Array.prototype.forEach
это может быть запущено не во всех браузерах, которые вы хотите.
$('.allcb').on('click', function() {
$(this).parent().siblings().find('.chk').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
</table>
Вы можете сделать это, добавив своего рода ссылку на другие флажки в основной флажок, который вы проверяете. Затем, нажав на главный флажок, вы сможете управлять остальными. Вот так:
Javascript:
$('.allcb').on('click', function(){
var index = $(this).data('index');
if ($(this).is(':checked'))
{
$('.childChk' + index).prop('checked', true);
}
else
{
$('.childChk' + index).prop('checked', false);
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
for ($i=0; $i<count($opinion); $i++) {
//if ($opinion[$i] == "")continue;
?>
<tr>
<td>
<!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->
<input type="checkbox" name="opinion[]" class="allcb" data-child="chk" data-index="<?=$i?>" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk chkChild<?=$i?>" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk chkChild<?=$i?>" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk chkChild<?=$i?>" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk chkChild<?=$i?>" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk chkChild<?=$i?>" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
<?php
}
?>
Обратите внимание, что я добавил счетчик $i в ваш класс флажков для детей. Это не изменит поведение какого-либо элемента DOM.
ИЗМЕНИТЬ:
Вы НЕ можете вызывать библиотеку jQuery внутри цикла. Библиотека jQuery ДОЛЖНА быть звонил всего один раз. Если вы позвоните несколько раз, все представленные здесь решения не будут работать.
Simple use this :
$(document).ready(function(){
$('.allcb').on('click', function(){
$(this).parent("td").parent("tr").find('.chk').prop('checked', this.checked);
});
});
Вы можете попробовать это,
$('.allcb').on('click', function(){
$(this).closest('tr').find('.chk').prop('checked', this.checked);
});
Или
$('.allcb').on('click', function(){
$(this).parents('tr').find('.chk').prop('checked', this.checked);
});
Это просто ответ Пекки на 1 строчку больше.
Если вы хотите установить все флажки с помощью javascript,
Вы можете присвоить всем флажкам класс,
И затем
var a = document.getElementsByClassName("yourClassName");
for(var key in a) {
a[key].checked = true;
}
Или
Если вы хотите использовать jQuery,
$(".yourClassName").attr("checked",true);
Это решение хорошо работает с динамическими элементами и использует className
для идентификации строки (.option-row
) вместо того, чтобы полагаться на tagName
, чтобы вы не стремились использовать определенные элементы для отображения данных.
Убедитесь, что вы включили ссылку на jquery.js
, прежде чем вызывать функцию $
(как в примере ниже).
// check or uncheck all boxes with class 'chk' when 'allcb' is clicked
$(document).on('click', '.allcb', function() {
$('.chk',$(this).closest('.option-row')).prop('checked', this.checked);
});
// simulate PHP; render some rows for demo
var html = [];
for (var i = 0; i < 5; i++) {
html.push('<tr class="option-row"><td><input type="checkbox" class="allcb cb"/></td><td><input type="checkbox" class="chk"/></td><td><input type="checkbox" class="chk"/></td></tr>');
}
$("tbody").html(html.join(''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Opinion</th>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
</tbody>
</table>