forms - 在带有 Blade 模板的表单中使用 laravelcollective/html 时防止转义单引号

Question

问题描述:
我在使用 laravelcollective/html 组件时遇到了 laravel 转义引号的一些问题。我需要引号保持未转义以保持 javascript 代码正常工作。

代码目的:
用户需要指明他希望何时将表单字段保留为空。如果没有，则需要一些输入。我不希望用户指出一个字段是空的并且他同时提交了一些输入。此行为由 JavaScript 通过在点击单选按钮时删除复选框的选中状态来控制，反之亦然。

表单中有多个字段(每个字段都有单选按钮和一个复选框，如果该字段应为空)。在提交表单之前，所有这些都必须通过 javascript 进行检查。每个字段都有自己的名称。

字段的 Blade 代码:

<div>
     {!! Form::checkbox('field_empty',1,null, ['id' => 'field_empty'] !!}
</div>
<div>
     {!! Form::radio('field', 0, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
     {!! Form::radio('field', 1, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
     {!! Form::radio('field', 2, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
</div>

javascript代码:

function unselectCheckbox(box,field)
{
    if (box.value >= 0)
    {
        document.getElementsById(field).checked = false;
    }
}

(我还有一个 javascript 函数，用于在单击复选框时删除选中的单选按钮，但我没有将其包含在代码中。)

使用上面的代码时，由于'field_empty'周围的单引号，我收到了一个laravel错误。删除单引号不会导致 js 工作。使用双引号会在生成的 html 中产生 '"'。

当然，我可以使用纯 html 而不是 Blade - 因此防止使用 {!! !!} 标签 - ，但我想知道是否可以在 Blade 中做到这一点，或者在 javascript 中使用另一种方法？

编辑:
我的表单包含多个必须检查的项目。每个项目都有自己的名称，并带有相应的用于确认空值的复选框:

<div>
     {!! Form::checkbox('field1_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
     {!! Form::radio('field1', 0, null) !!}
     {!! Form::radio('field1', 1, null) !!}
     {!! Form::radio('field1', 2, null) !!}
</div>
<div>
     {!! Form::checkbox('field2_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
     {!! Form::radio('field2', 0, null) !!}
     {!! Form::radio('field2', 1, null) !!}
     {!! Form::radio('field2', 2, null) !!}
</div>
<div>
     {!! Form::checkbox('field3_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
     {!! Form::radio('field3', 0, null) !!}
     {!! Form::radio('field3', 1, null) !!}
     {!! Form::radio('field3', 2, null) !!}
</div>

Answer 1

属性值可以通过将其作为 HtmlString 传递来进行转义。不会被转义的实例。

{!! Form::radio('field', 0, null, ['onClick' => new Illuminate\Support\HtmlString("unselectCheckbox(this,'field_empty')")]) !!}

话虽如此，拥有 onclick在元素上内联定义的事件通常被认为是一个坏主意。您应该改为在 JavaScript 端处理事件，因此您不必包含 onClick元素定义中的属性。所以 HTML 应该是这样的:

<div>
     {!! Form::checkbox('field_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
     {!! Form::radio('field', 0, null) !!}
     {!! Form::radio('field', 1, null) !!}
     {!! Form::radio('field', 2, null) !!}
</div>

处理它的 JavaScript 应该是这样的:

(function () {
    var empty  = document.getElementById('field_empty');
    var radios = document.getElementsByName('field');

    // When clicking on any of the radio buttons, uncheck the field_empty checkbox
    for (var i = 0; i < radios.length; i++) {
        radios[i].onclick = function () {
            // The "if (box.value >= 0)" condition is useless here
            // because it will always be true, so I removed it
            empty.checked = false;
        };
    }

    // When clicking on the empty checkbox, uncheck the radio buttons
    empty.onclick = function () {
        for (var i = 0; i < radios.length; i++) {
            radios[i].checked = false;
        }
    };
})();

这是一个 working example上面的代码。如您所见，不需要像 unselectCheckbox 这样的外部函数。因为所有的逻辑都在事件函数中处理。

还有一个 jQuery 版本，它比 vanilla JS 版本更短且更易读:

(function () {
    var empty  = $('#field_empty');
    var radios = $('[name=field]');

    radios.click(function () {
        empty.prop('checked', false);
    });

    empty.click(function () {
        radios.prop('checked', false);
    });
})();

这是一个 working example jQuery 版本。