我正在检查所有按钮,但我对javascript有点太熟悉了。
基本上,我在页面顶部有一个复选框,当你检查它时,它会通过并更改要检查的表格的每一行中的复选框。
我查看了类似的问题,我知道我必须使用
~~~~.prop('checked', ...)
这是我想要检查表格中所有方框的复选框。
<div class="disc-opt" style="float:left">
Adjust All
<div class="make-switch">
<input type="checkbox" class="create-adjustments" />
</div>
</div>
这是表格行布局。
<tr class="<?= $data['adjusted'] ? "success" : "" ?>">
<td>
Stuff
</td>
<td><?= $data['products_name'] ?></td>
<td><?= $data['total_final_quantity'] ?></td>
<td><?= $data['total_onhand'] ?></td>
<td><?= $data['difference'] ?> </td>
<td><?= $data['difference_cost'] ?></td>
<!-- The Checkbox to be changed -->
<td class = "Adjustbox">
<?php if(!$data['adjusted']): ?>
<div class="make-switch">
<input type="checkbox" name="adjust_products[]"
value="<?= $products_id ?>">
</div>
<?php else: ?>
Adjustment Complete
<?php endif; ?>
</td>
</tr>
编辑:这是我目前正在使用的内容(我不确定这个设置是否真的很糟糕,它来自我今天以前从未接触过的一堆旧代码)。我也在上面的代码中进行了一些编辑。
function createAdjustments()
{
if($("#create-adjustments").is(':checked'))
{
//turn all on
} else {
//turn all off
}
}
$('#create-adjustments').change(function(e)
{
createAdjustments();
});
$('#create-adjustments').trigger('change');
我已经能够通过document.ready函数访问表格行中的元素,但是当我勾选复选框时,我无法正常工作。
以下是我正在尝试做的事情的图片:
我正在尝试这样做,以便当我选中左上角的复选框时,它会通过表格并检查右列中的所有复选框。
答案 0 :(得分:3)
看一下this我之前做了类似的事情,这对我有用。差不多,你用你的所有输入框创建一个div,并说如果点击了主要的那个就将所有这些标记为已选中。
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JAVASCRIPT:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});
答案 1 :(得分:1)
如果您正在谈论~~~~.prop('checked', ...)
,那么您就是在讨论jQuery。
在这种情况下,如果您想要勾选复选框,则需要提供ID
或class
。如果你不想要,那么:
$(".make-switch input:checkbox:first").prop('checked',true)
答案 2 :(得分:0)
我最终用这个来解决它。
if($("#create-adjustments").is(':checked'))
{
$("tr").find("td.box").find("div").find("div").prop('class', "switch-on switch-animate");
} else {
$("tr").find("td.box").find("div").find("div").prop('class', "switch-off switch-animate");
}
答案 3 :(得分:0)
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('#checkboxlist input[type="checkbox"').prop('checked', true);
} else {
$('#checkboxlist input[type="checkbox"').prop('checked', false);
}
});