【问题标题】：Display fields depending on output checkbox - laravel根据输出复选框显示字段 - laravel
【发布时间】：2019-08-14 07:40:22
【问题描述】：

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

启动刀片模板

@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>

【问题讨论】：

您在 HTML 标签中使用了多个相同的 id (id="ifyes")。你应该在那里使用类。
我也有类似的问题。也许这会有所帮助。 stackoverflow.com/questions/57524251/…
@Nemo 谢谢它解决了我的问题。

标签： jquery laravel checkbox show-hide

【解决方案1】：

您的 html 中有重复的 ID。 ID应该是唯一的。类可以在多个元素上具有相同的类。但是每个元素的 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");
  }
});

这是 JSFiddle

的工作链接

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

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

【讨论】：

你能告诉我你在哪里添加了 jquery 吗？你的代码在哪里？你能更新你的答案吗？粘贴刀片文件
您的 JQuery 链接在哪里？你链接你的JQuery了吗？将此粘贴到我的脚本上方：<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 并将样式放在代码上方。
另外，表单是否在脚本之后？请暂时从脚本标签中删除type="text/javascript"。并将我上面的评论脚本复制粘贴到脚本标签上方
表单在脚本之后。我刚刚删除了所有代码并将您的代码粘贴到我的刀片模板中并添加了链接。甚至您的代码也无法正常工作。
你控制台错误说什么？当您右键单击浏览器空白区域并选择“检查元素”并转到“控制台”选项卡时，看看您遇到了什么错误

【解决方案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')}}"
>

【讨论】：