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

Using .change() function to auto-submit form on checkbox change?

本文关键字：表单 提交 复选框 change 函数 使用      更新时间：2023-09-26

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

我需要在勾选复选框时自动提交表单。到目前为止，我有下面的代码，它运行良好。选中或取消选中复选框时，必须提交表单。有一些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>

上面调用的复选框.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(( 函数工作，或者它们是我可以使用的替代函数？

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

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

然后，您的点击处理程序可以执行与更改事件在未使用插件时通常采取的相同操作。

下面是一个示例：

网页(来源(： 

<!-- 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！您必须在生成此代码后绑定单击事件。

<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：

注意：这必须在将复选框转换为滑块后绑定。如果你之前尝试过，HTML 在 DOM 中还不存在！

$('.tzCheckBox').click(function() {
    // alert the value of the hidden checkbox
    alert( $('#pelda1').attr("checked") );
    // submit your form here
});

像这样聆听变化：

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

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

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

后

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

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

相关文章：