javascript - 当用户标记复选框时触发 jquery 操作

Question

我对 javascript 和 jquery 非常陌生。我有这个复选框:

<label for="editable">Editable </label><input name="editable" type="checkbox" id="edita"/>

这个 jquery 操作:

$('#slickbox1').toggle(400); 
return false;

我想在选中该复选框时执行该操作。谢谢!

Answer 1

你可以尝试:

$('#edita').change(
function() {
    if ($(this).is(':checked')) {
       $('#slickbox1').toggle(400);
    }
});

尽管值得注意的是运行 toggle()仅当它被选中时(假设它开始时未选中)涉及用户单击输入一次以显示它，然后再次删除选中并再次以重新检查它，使其因toggle()而隐藏.

可能值得考虑:

$('#edita').change(
function() {
    if ($(this).is(':checked')) {
        // checked
        $('#slickbox1').show(400);
    }
    else {
        // un-checked
        $('#slickbox1').hide(400);
    }
});

其中显示 $('#slickbox1')如果复选框被选中，如果没有则隐藏它，

或者:

$('#edita').change(
function() {
       $('#slickbox1').toggle(400);
});

这会切换 $('#slickbox1')之间show()和hide()当 input已选中和未选中。

<小时/>

编辑以解决 DomingoSL(OP)在评论中提出的问题:

...can you please make an edit to see the procedure if now the triger is not a checkbox but a button?

需要进行两项更改来适应这一点:

1. 一个button没有change事件，因此必须使用 click() 相反，并且
2. 一个button没有:checked (或同等)状态，所以 if/else变得多余。

不过，我假设您的元素名称保持不变，因为您没有发布任何相反的信息，一种方法是:

$('#edita').click(
function(){
    $('#slickbox1').toggle(400);
});