php - Laravel 背包依赖文本框

Question

我被 Laravel 背包困住了。

我想在单击复选框时显示文本框。我想在我的项目中实现这一点。如何使用控制器实现这一点？我的字段在控制器中初始化

控制器.php

  // *****
        // FIELDS ALTERNATIVE
        // *****
        "fields" => [

            [
                'name' => "event_name",
                'label' => "Event name",
                'type' => "text",
                'placeholder' => "First Name and Last Name",
            ],
            [
                'name' => "event_topic",
                'label' => "Event Topic",
                'type' => "text",
                'placeholder' => "Event Topic",
            ],
            [
                'name' => "event_type_id",
                'label' => "Event Type",
                'model' => "App\Larapen\Models\EventType",
                'entity' => "eventType",
                'attribute' => "name",
                'type' => "select",
            ],

           [   // Checkbox
            'name' => 'social_links',
            'label' => 'Links to facebook and twitter',
            'type' => 'checkbox'
        ],
    ]

当我单击“social_links”复选框时，我的添加页面中应显示两个文本框。

请帮我解决这个问题。等待回复............

Answer 1

你可以这样做：

var checked = document.getElementById('checkbox');
checked.addEventListener('change', function() {
  if (this.checked){
  	document.getElementById('text_1').style.display='block';
        document.getElementById('text_2').style.display='block';
  } else {
  	document.getElementById('text_1').style.display='none';
        document.getElementById('text_2').style.display='none';
  }
});

<input type="checkbox" id="checkbox" aria-label="...">

<textarea rows="4" cols="50" id="text_1" style="display:none">
Text Area 1 
</textarea>

<textarea rows="4" cols="50" id="text_2" style="display:none">
Text Area 2 
</textarea>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

您需要向字段添加一些属性：

$this->crud->addFields([
        [
            'name' => "event_name",
            'label' => "Event name",
            'type' => "text",
            'placeholder' => "First Name and Last Name",
            'attributes' => ['id'=>'text_1', 'style' => 'display:none'],
        ],
        [
            'name' => "event_topic",
            'label' => "Event Topic",
            'type' => "text",
            'placeholder' => "Event Topic",
            'attributes' => ['id'=>'text_2', 'style' => 'display:none'],
        ],
        [   // Checkbox
            'name' => 'social_links',
            'label' => 'Links to facebook and twitter',
            'type' => 'checkbox',
            'attributes' => ['id'=>'checkbox'],
        ],
]);

Answer 2

我只是对 Marco 提供的答案稍作改动。

           [   
                'name' => 'social_links',
                'label' => 'Links to facebook and twitter',
                'type' => 'checkbox',
                'id'=>'checkbox'
            ],
            [
                'name' => "event_name",
                'label' => "Event name",
                'type' => "text",
                'placeholder' => "First Name and Last Name",
                'id'=>'text_1',
            ],
            [
                'name' => "event_topic",
                'label' => "Event Topic",
                'type' => "text",
                'placeholder' => "Event Topic",
                'id'=>'text_2'
            ],

在查看页面

<script>
$( document ).ready(function() {
    $('#text_1').parent().hide();
    $('#text_2').parent().hide();

});

var checked = document.getElementById('checkbox');
checked.addEventListener('change', function() {
  if (this.checked){
    $('#text_1').parent().show();
    $('#text_2').parent().show();
  } else {
    $('#text_1').parent().hide();
    $('#text_2').parent().hide();
  }
});
</script>