Question

我不确定我需要使用哪个，.bind（）或.extend以及如何使用它？

我有两个复选框，如果选中它们，一旦点击它们，就会调用一个进程。我也有按钮，一旦点击它将检查两个复选框，并执行复选复选框的功能

$('#check1').click(function(){
    if($(this).is(':checked')){
        // do stuff for check one only
    }else{
        // undo stuff
    }
});

$('#check2').click(function(){
    if($(this).is(':checked')){
        // do stuff for check two only
    }else{
        // undo stuff
    }
});

$('#btn').click(function(){
    $('#check1, #check2').prop('checked', true);
    // also carry out the functional ifs from other clicks
});

Answer 1

检查小提琴：

<强> http://jsfiddle.net/LpSxS/1/

示例Html：

<input type="checkbox" name="vehicle" value="Bike" id="check1">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" id="check2">I have a car<br/> 
<button id="btn">checkboth</button>

<强> jquery的：

$('#check1').on("change",function(){
    if($(this).is(':checked')){
        alert("checked");
    }else{
        alert("unchecked");
    }
});

$('#check2').on("change",function(){
    if($(this).is(':checked')){
        alert("checked")
    }else{
       alert("unchecked")
    }
});

$('#btn').on("click",function(){
    $('#check1, #check2').prop('checked', true).trigger('change');
    // also carry out the functional ifs from other clicks
});

Answer 2

使用change代替click。如果要执行更改事件，则需要使用trigger('change')

$('#check1').on("change",function(){
    if($(this).is(':checked')){
        alert("checked");
    }else{
        alert("unchecked");
    }
});

$('#check2').on("change",function(){
    if($(this).is(':checked')){
        alert("checked")
    }else{
       alert("unchecked")
    }
});

$('#btn').on("click",function(){
    $('#check1, #check2').prop('checked', true).trigger('change');
    // also carry out the functional ifs from other clicks
});

Answer 3

我不确定你为什么要在这里使用extend，因为这与你的问题无关。您应该按照建议使用change事件，并在以编程方式更改其属性后触发匹配的元素集：

jsFiddle

$('#check1').change(function(){
    if(this.checked){
        // do stuff for check one only
        console.log(this,this.checked);
    }else{
        // undo stuff
    }
});

$('#check2').change(function(){
    if(this.checked){
        // do stuff for check two only
        console.log(this,this.checked);
    }else{
        // undo stuff
    }
});

$('#btn').click(function(){
    $('#check1, #check2').prop('checked', true).change();
    // shortcut for:  $('#check1, #check2').prop('checked', true).trigger('change');
    // or  sometimes better, no bubbling: $('#check1, #check2').prop('checked', true).triggerHandler('change');
});

Answer 4

看看这个小提琴：http://jsbin.com/eJUFinA/2/edit

$(document).ready(function () {
   $('#check1').change(function () {
     if(this.checked) {
       //code to checkbox1 checked.
     } else {
       //code to checkbox1 unchecked.
     }
  });
  $('#check2').change(function () {
     if(this.checked) {
       //code to checkbox2 checked.
     } else {
       //code to checkbox2 unchecked.
     }
  });
  $('#btn').click(function () {
    var checked = $('#check1, #check2').prop('checked');
    //do your stuff here.
  });
});

Jquery扩展或绑定

4 个答案: