Jquery 带有更改事件的复选框道具方法
Jquery checkbox prop method with change event
我需要对从另一个复选框选中的复选框执行一些操作。但这是行不通的。为什么?简单示例:
$('.tmp').click(function(){
$('.quest:not(:checked)').prop('checked', true);
});
$('.quest').change(function(){
console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="" class="tmp"> Click me to see some magic... or not(
<br>
<input type="checkbox" name="" id="" class="quest">1
<input type="checkbox" name="" id="" class="quest">2
<input type="checkbox" name="" id="" class="quest">3
<input type="checkbox" name="" id="" class="quest">4
<input type="checkbox" name="" id="" class="quest">5
<input type="checkbox" name="" id="" class="quest">6
<input type="checkbox" name="" id="" class="quest">7
<input type="checkbox" name="" id="" class="quest">8
<input type="checkbox" name="" id="" class="quest">9
<input type="checkbox" name="" id="" class="quest">10
您需要使用trigger
方法手动触发change
事件,例如:
$('.quest:not(:checked)')
.prop('checked', true) // updating prop but the change event is not fired
.trigger('change'); // this line will trigger the change event on .quest
您需要根据添加复选框 属性 检查 .tmp
是否被选中。
$('.tmp').click(function(){
if($(this).is(':checked')){
$('.quest').prop('checked', true);
} else {
$('.quest').prop('checked', false);
}
});
$(document).ready(function () {
$('.tmp').click(function () {
$('.quest:not(:checked)').prop('checked', true);
});
$('.quest').change(function(){
console.log(this);
});
});
我需要对从另一个复选框选中的复选框执行一些操作。但这是行不通的。为什么?简单示例:
$('.tmp').click(function(){
$('.quest:not(:checked)').prop('checked', true);
});
$('.quest').change(function(){
console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="" class="tmp"> Click me to see some magic... or not(
<br>
<input type="checkbox" name="" id="" class="quest">1
<input type="checkbox" name="" id="" class="quest">2
<input type="checkbox" name="" id="" class="quest">3
<input type="checkbox" name="" id="" class="quest">4
<input type="checkbox" name="" id="" class="quest">5
<input type="checkbox" name="" id="" class="quest">6
<input type="checkbox" name="" id="" class="quest">7
<input type="checkbox" name="" id="" class="quest">8
<input type="checkbox" name="" id="" class="quest">9
<input type="checkbox" name="" id="" class="quest">10
您需要使用trigger
方法手动触发change
事件,例如:
$('.quest:not(:checked)')
.prop('checked', true) // updating prop but the change event is not fired
.trigger('change'); // this line will trigger the change event on .quest
您需要根据添加复选框 属性 检查 .tmp
是否被选中。
$('.tmp').click(function(){
if($(this).is(':checked')){
$('.quest').prop('checked', true);
} else {
$('.quest').prop('checked', false);
}
});
$(document).ready(function () {
$('.tmp').click(function () {
$('.quest:not(:checked)').prop('checked', true);
});
$('.quest').change(function(){
console.log(this);
});
});