在我的 SelectAll 复选框和单击触发器上,应该适用于所有输入 - 其上有单击事件。
触发器对 selectall 起作用,但取消选中 selectall 不起作用。它没有取消选中所有输入
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
下面是我所做的
$(document).ready(function () {
$("#SelectAll").click(function () {
$(".checkBoxClass").attr('checked', $(this).attr('checked'));
$(".checkBoxClass").change(function(){
if (!$(this).attr("checked")){
$("#SelectAll").attr("checked",false);
}
});
});
});
上面的 Jquery 适用于全选/取消全选复选框 - 如果我删除下面的触发器,该复选框将起作用
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true); // if i remove this line then selectall for checkbox don't works
});
});
但我需要上面的 jquery 来触发 -total_select 函数
function total_select(id,carat,price){
var lenChkBox = $("input[name='pid[]']:checked").length;
if(document.getElementById("pid_"+id).checked==true) {
total_select.s++;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c +=carat;
var cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p +=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
} else {
total_select.s--;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c -=carat;
cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p -=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
}
我尝试了很多:
$(".checkBoxClass").attr('checked', true).triggerHandler('click');
$(".checkBoxClass").prop('checked', true).triggerHandler('click');
但仍然不起作用,它确实检查“SelectAll”上的所有输入并触发total_select函数并获得正确的结果,但是当我取消选择/取消选中“SelectAll”时,我的所有输入都不会被取消选择/取消选中
最佳答案
通过使用不显眼的事件处理程序而不是过时的 on*
事件属性,您既可以解决问题,又可以提高代码质量。
首先,您可以为每个 .checkBoxClass
分配其自己的 change
事件处理程序,然后该处理程序可以从您放置的某些 data
属性中读取元数据关于元素。
然后,可以简化全选逻辑以检查/取消选中所有这些元素,同时触发 change
事件来执行处理程序。当您使用 jQuery 时,这里有一个示例:
$('.checkBoxClass').change(function() {
if (!this.checked)
return;
// place total_select() logic here, and read the parameters from the elements' data()
console.log($(this).data());
});
$('#SelectAll').change(function() {
$('.checkBoxClass').prop('checked', this.checked).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" data-a="1" data-b="0.35" data-c="2700.00" type="checkbox">A
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" data-a="2" data-b="0.35" data-c="2700.00" type="checkbox">B
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" data-a="3" data-b="0.35" data-c="2700.00" type="checkbox">C
关于javascript - 使用触发器选择所有复选框 - jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45632715/