Question

这是一个很长的问题所以请耐心等待。

勾选复选框时，我需要自动提交表单。到目前为止，我有以下代码，完美无缺。选中或取消选中复选框时，表单必须提交。有些PHP会读取数据库条目并在加载时显示相应的状态（已选中或未选中）。

<form method="post" id="edituser" class="user-forms" action="--some php here--">
    <input class="lesson" value="l101" name="flesson" type="checkbox" />
</form>
<script>
    $('.lesson').change(function() {
        $('.user-forms').submit(); 
    });
</script>

然而，当我介绍一个花哨的复选框脚本，它将复选框变成滑块时，它不再起作用。 jQuery脚本复选框如下：

<script src="'.get_bloginfo('stylesheet_directory').'/jquery/checkboxes.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("input[type=checkbox]").tzCheckbox({labels:["Enable","Disable"]});
    });
</script>

上面调用的checkboxes.js的内容如下：

(function($){
$.fn.tzCheckbox = function(options){

    // Default On / Off labels:

    options = $.extend({
        labels : ['ON','OFF']
    },options);

    return this.each(function(){
        var originalCheckBox = $(this),
            labels = [];

        // Checking for the data-on / data-off HTML5 data attributes:
        if(originalCheckBox.data('on')){
            labels[0] = originalCheckBox.data('on');
            labels[1] = originalCheckBox.data('off');
        }
        else labels = options.labels;

        // Creating the new checkbox markup:
        var checkBox = $('<span>',{
            className   : 'tzCheckBox '+(this.checked?'checked':''),
            html:   '<span class="tzCBContent">'+labels[this.checked?0:1]+
                    '</span><span class="tzCBPart"></span>'
        });

        // Inserting the new checkbox, and hiding the original:
        checkBox.insertAfter(originalCheckBox.hide());

        checkBox.click(function(){
            checkBox.toggleClass('checked');

            var isChecked = checkBox.hasClass('checked');

            // Synchronizing the original checkbox:
            originalCheckBox.attr('checked',isChecked);
            checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
        });

        // Listening for changes on the original and affecting the new one:
        originalCheckBox.bind('change',function(){
            checkBox.click();
        });
    });
};
})(jQuery);

这个脚本附带了一些CSS，但是我把它遗漏了，因为它并不重要。

最后，这是jQuery脚本对复选框的作用：

<input id="on_off_on" class="lesson" value="lesson11-1" name="forexadvanced[]" type="checkbox" style="display: none; ">
<span classname="tzCheckBox checked" class=""><span class="tzCBContent">Disable</span><span class="tzCBPart"></span></span>

当复选框更改为滑块时，.change（）函数不再检测复选框状态的更改。

如何使.change（）函数工作或者是我可以使用的替代函数？

Answer 1

听取这样的改变：

 $('.lesson').bind("tzCheckboxChange",function() {
      $('.user-forms').submit(); 
 });

通过添加以下行来修改插件：

 $(originalCheckBox).trigger("tzCheckboxChange");

后

 checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);

这样，只要您使用此插件，就可以收听 tzCheckboxChange ，而不仅仅是更改。我真的不知道插件发生了什么，但是当它只是通过触发器触发时（除非它不隐藏原始复选框），它似乎有点时髦才能听到更改事件。

Answer 2

此插件会将您的复选框更改为span元素，并隐藏实际的复选框。因此，当您单击它们时，没有任何反应。由于span元素没有onchange事件，因此您无法将更改事件绑定到这些事件。

但是，span元素确实有点击事件，这意味着您可以使用Firebug或Chrome调试器将Click事件绑定到生成的跨度，以找到要绑定的正确元素。

如果没有使用插件，您的点击处理程序可以采取您的更改事件通常会采取的相同操作。

以下是一个例子：

HTML（来源）：

<!-- This is a checkbox BEFORE running the code that transforms the checkboxes 
   into sliders -->
<li>
    <label for="pelda1">Opció 1:</label>
    <input class="pelda" type="checkbox" id="pelda1" name="pelda1" />
</li>

HTML（从Chrome调试器生成）：

注意：这是运行JavaScript后生成的HTML，它将复选框转换为滑块！您必须绑定点击事件 AFTER 生成此代码。

<li>
    <label for="pelda1">Option 1:</label>

    <!-- The hidden checkbox -->
    <input class="pelda" type="checkbox" id="pelda1" name="pelda1" style="display: none; " />

    <!-- the "checked" class on the span gets changed when you toggle the slider 
         if it's there, then it's checked. This is what you're users are actually
         changing. 
    -->
    <span class="tzCheckBox checked">
        <span class="tzCBContent">active</span>
        <span class="tzCBPart"></span>
    </span>
</li>

<强> JavaScript的：

注意：必须绑定 AFTER 将复选框转换为滑块。如果您以前尝试过，那么DOM中将不存在HTML！

$('.tzCheckBox').click(function() {

    // alert the value of the hidden checkbox
    alert( $('#pelda1').attr("checked") );

    // submit your form here
});

使用.change（）函数在复选框更改时自动提交表单？

2 个答案: