根据输出复选框显示字段 - laravel

Question

我的表单包含多个字段。其中一个字段是 selection。如果在 select 框中是 selected，则应出现两个额外的字段。但由于某种原因，它不起作用。我正在使用 jquery 让字段出现。贝娄，你可以找到我的代码。感谢您的帮助。

启动blade模板

@extends('layout')

@section('content')
<div class="container col-sm-12">
<script type="text/javascript">
function displayFields() {
    if (document.getElementById("isYes").selected) {
        document.getElementById("ifyes").style.display = "block";
        document.getElementById("ifno").style.display = "none";
    } else {
        document.getElementById("ifno").style.display = "none";
        document.getElementById("ifyes").style.display = "none";
    }
}
</script>


        <style>
        .hide{
        display:none;
        }
        .show {
        display: block;
        }
        </style>

在 jquery 之后，我直接添加了要隐藏或显示字段的表单。

<form action="/events" method="POST">
@csrf

            ...
                    <div class="d-flex">                    
                        <div class="flex-fill p-2">
                        <select name="condition" class="form-control" onchange="displayFields()" required>
                                <option>{{old('condition')}}</option>
                                <option id="isYes">Yes</option>
                                <option id="isNo">No</option>
                            </select>
                        </div>
                    </div> 
                </div>
            </div> 
              <div class="row">
                <div class="col-2">
                    <div class="d-flex">
                        <div class="p-1">
                            <label class="p-2" for="type" id="ifyes" style="display: none;">Type</label>
                        </div> 
                    </div>
                </div> 
                <div class="col-4"> 
                    <div class="d-flex">                       
                        <div class="flex-fill p-2">
                            <input  id="ifyes" style="display: none;"
                                    type="text" 
                                    class="form-control input-text" 
                                    placeholder="Type"
                                    name="type" 
                                    value="{{old('type')}}"
                            >
                        </div>
                    </div> 
                </div>
                <div class="col-2">
                    <div class="d-flex">
                        <div class="p-1">
                            <label class="p-2" for="function" id="ifyes" style="display: none;">function</label>
                        </div>
                    </div>
                </div>
                <div class="col-4"> 
                    <div class="d-flex">   
                        <div class="flex-fill p-2">
                            <input  id="ifyes" style="display: none;"
                                    type="text" 
                                    class="form-control input-text" 
                                    placeholder="function"
                                    name="function" 
                                    value="{{old('function')}}"
                            >
                        </div>
                    </div>

layout.blade.php

<head>
<title>@yield('title',"Event Planner")</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="base-url" content="{{ url('/') }}">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- Fonts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>

Answer 1

您的 html 中有重复的 ID。 ID 应该是唯一的。类可以在多个元素上具有相同的 class。但是每个元素的 ID 应该是唯一的。如果您使用 JQuery，您可以使用它来处理更改。使用 .change() 并使用 .addClass() & .removeClass() 方法链接。根据提供的信息，下面是一个可能有帮助的示例。这是同一件事，做同样的事情，但更多 "JQuery":

<style>
  .hide{
  display:none;
}
  .show {
  display: block;
}
</style>


//Add an ID and remove the onChange
//Add value instead of ID to the options
<select name="condition" class="form-control" id="select-condition" required>
   <option>{{old('condition')}}</option>
   <option value="yes">Yes</option>
   <option value="no">No</option>
</select>

<label class="hide p-2" for="function" id="label1">function One</label>
<label class="hide p-2" for="function" id="label2">function Two</label>

//We are going to listen for any changes of the select field
$( "#select-condition" ).change(function() {
  if(this.value == 'yes'){
    $('#label1').removeClass( "hide" );
    $('#label2').addClass( "hide" );
  }else if(this.value == 'no'){
    $('#label1').addClass( "hide" );
    $('#label2').removeClass( "hide" );
  }
  else{
    $('#label1').removeClass( "show" ).addClass("hide");
    $('#label2').removeClass( "show" ).addClass("hide");
  }
});

这是工作 link 到 JSFiddle

注意：不要忘记将 JQuery 添加到您的项目中，并且 JQuery 应该在代码之前 linked .代码应该在下面

希望这对您有所帮助。快乐编码:)

Answer 2

由于@ageans 和@Mohamed 的投入，我最终得到了这里。

 function showType(i){

        var x = document.getElementById("showType"+i);
        var y = document.getElementById("showTypeLabel"+i);
        var z = document.getElementById("selectType"+i);

        if (z.options[z.selectedIndex].value == "Yes"){
            x.style.display = "block";
            y.style.display = "block";
        }else{
            x.style.display = "none";
            y.style.display = "none";
        }        
    }

<select name="condition" class="form-control" onchange="showType(0)" required>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<input  id="showTypeLabel0" style="display: none;" type="text"  class="form-control input-text" 
         placeholder="Type" name="type"  value="{{old('type')}}"
>
 <input  id="showType0" style="display: none;"
          type="text" 
          class="form-control input-text" 
          placeholder="function"
          name="function" 
          value="{{old('function')}}"
>

根据输出复选框显示字段 - laravel

Display fields depending on output checkbox - laravel

checkbox

jquery

show-hide

laravel

启动blade模板

layout.blade.php