Clear val on toggle with boolean

Question

我有一个隐藏的div，其中包含表单元素，我在单选选项上切换(认为是/否作为选项)

如果他们选择yes，则显示div并要求字段，否则隐藏div并清除字段(如果他们输入了任何值)。

我可以做所有这些，除了通过传递一个布尔标志给toggle函数

清除值

的例子:

$("[name=nameOfElement]").change(function() {
    var show = $('input[name=nameOfElement]:checked').val() == "true";
    $('#hiddenForm').toggle(show);
    $('#hiddenInput').toggleClass('required',show);
});

是否有清除传递的布尔选项的值?

$("[name=nameOfElement]").change(function() {
    var show = $('input[name=nameOfElement]:checked').val() == "true";
    $('#hiddenForm').toggle(show);
    $('#hiddenInput').toggleClass('required',show).valClear(show);
});

更新:不寻找一个插件只是想知道如果我能做到这一点没有if/else条件

Answer 1

可能

$("[name=nameOfElement]").change(function() {
var show = $('input[name=nameOfElement]:checked').val() == "true";
$('#hiddenForm').toggle(show);
$('#hiddenInput').toggleClass('required',show).val(show ? $('#hiddenInput').val() : '');
});

Answer 2

您可以附加多个更改处理程序:

$("[name=nameOfElement]").change(function() {
    var show = $('input[name=nameOfElement]:checked').val() == "true";
    $('#hiddenForm').toggle(show);
    $('#hiddenInput').toggleClass('required',show);
});
$("[name=nameOfElement]").change(function() {
    if($('input[name=nameOfElement]:checked').val() == "true")
        $('#hiddenInput').val('');
});

但是对我来说，这看起来比只使用一个有条件的处理程序更糟糕。你也可以用自己的小插件添加一些东西，比如valClear:

(function($) {
    $.fn.clearIf = function(clearIt) {
        if(clearIt)
            this.each(function() { $(this).val(''); });
        return this;
    };
})(jQuery);

然后:

$("[name=nameOfElement]").change(function() {
    var show = $('input[name=nameOfElement]:checked').val() == "true";
    $('#hiddenForm').toggle(show);
    $('#hiddenInput').toggleClass('required',show).clearIf(!show);
});

如果我只在一个地方做这件事，我会用Ron的三元方法。