0

我有一个 JS 代码，允许我替换 HTML 代码中的复选框。

我的问题是：我所有的复选框都被替换了，但我的其他 JS 代码不起作用。如果我点击标签，没关系，但不是在替换的复选框上。

我的 HTML：

<input type="checkbox" class="myCB" id="test" class="property-custom-field" />
<label for="test">Test</label>
<input type="hidden" name="moods" id="moods">

我的 JS：

<script>
jQuery('input[type=checkbox]').each(function() { jQuery(this).replaceCheckbox(); });

$("input.myCB").click(function() {
        alert('Test');
        var clickedId = $(this).attr('id');
        var locationBtn = $('#moods');
        var locationBtnValue = $('#moods').val();

        if(locationBtnValue.toString().indexOf(clickedId) == -1) { locationBtn.val(locationBtnValue + clickedId + ","); }
        else { locationBtn.val(locationBtnValue.replace(clickedId + ',','')); }
});
</script>

我替换复选框的功能：

<script>
replaceCheckbox: function() {

    //// vars
    var selCont = this;

    //// WRAPS IT AROUND SELECT
    selCont.wrap('<div class="checkbox-replace"></div>');
    var mainCont = selCont.parent();

    //// IF IT'S CHECKED
    if(selCont.is(':checked')) { mainCont.addClass('checkbox-replace-checked'); }

    //// MAKES IT OVERLAY THE CONTAINER
    selCont.css({ display: 'none' });

    //// WHEN WE CLICK THE MAIN CONTAINER
    mainCont.click(function() {

        //// IF IT'S CHECKED
        if(jQuery(this).attr('class').indexOf('checked') != -1) {

            //// UNCHECKS IT
            jQuery(this).removeClass('checkbox-replace-checked');
            selCont.removeAttr('checked');

        } else {

            //// UNCHECKS IT
            jQuery(this).addClass('checkbox-replace-checked');
            selCont.attr('checked', 'checked');

        }

    });

}
</script>

希望你能帮助我。

谢谢。

4

2 回答 2

1

调用replaceCheckbox 后需要重新配置事件处理程序。

这个脚本：

    $("input.myCB").click(function() {
        alert('Test');
        var clickedId = $(this).attr('id');
        var locationBtn = $('#moods');
        var locationBtnValue = $('#moods').val();

        if(locationBtnValue.toString().indexOf(clickedId) == -1) { locationBtn.val(locationBtnValue + clickedId + ","); }
        else { locationBtn.val(locationBtnValue.replace(clickedId + ',','')); }
    });

正在现有 input.myCB 上设置事件处理程序。但是，如果您用其他脚本替换它们，则事件处理程序不会添加到新复选框中，因此您需要再次调用它以再次设置它们。

编辑：

现在我可以看到你的小提琴，我发布了一个新的答案，请参考它。

于 2013-09-12T14:46:26.397 回答
0

现在我有了你的小提琴，我可以看到错误。

这一行在这里：

replaceCheckbox: function() {
   // BLA BLA BLA
};

它抛出一个错误（看看你的 javascript 控制台）。你应该做这个：

$.fn.replaceCheckbox = function() {
   // BLA BLA BLA
};
于 2013-09-12T14:55:02.990 回答