Laravel -如何根据所选的单选按钮有条件地显示输入选择框？
Laravel是一种流行的PHP开发框架，用于构建Web应用程序。在Laravel中，可以根据所选的单选按钮有条件地显示输入选择框。下面是一种实现这个功能的方法：
- 首先，在视图文件中定义一个单选按钮组，例如：
<input type="radio" name="option" value="option1"> Option 1
<input type="radio" name="option" value="option2"> Option 2- 接下来，使用JavaScript或jQuery来监听单选按钮的变化事件，并根据所选的选项显示或隐藏相应的输入选择框。例如，使用jQuery可以这样实现：
$(document).ready(function() {
$('input[name="option"]').change(function() {
var selectedOption = $(this).val();
if (selectedOption === 'option1') {
$('#input1').show();
$('#input2').hide();
} else if (selectedOption === 'option2') {
$('#input1').hide();
$('#input2').show();
}
});
});- 在视图文件中定义相应的输入选择框，例如：
<div id="input1" style="display: none;">
<input type="text" name="input1" placeholder="Input 1">
</div>
<div id="input2" style="display: none;">
<input type="text" name="input2" placeholder="Input 2">
</div>这样，当用户选择不同的单选按钮时，相应的输入选择框会根据条件显示或隐藏。
对于Laravel开发中的其他问题，你可以参考腾讯云的云服务器CVM产品，它提供了稳定可靠的云计算基础设施，适用于各种Web应用程序的部署和运行。详情请参考：腾讯云云服务器CVM。
相关·内容
1回答
如何使用knockoutjs绑定嵌套输入
javascript、jquery、knockout.js
我有一个想要将每个单选按钮的所有嵌套输入字段绑定到它的选项的位置，这样我就可以在单击它时显示结果。例如，如果选择option1，所显示的唯一结果将是option1的嵌套输入。我如何使用knockout.js和jQuery来实现它呢？
<div id="results" class="jumbotron">
<!-- ko if : option1 -->
<ul data-bind="text: input1"></ul>
...
<!-- /ko -->
<
浏览 3提问于2015-02-24得票数 0
回答已采纳
2回答
在下拉(编辑时)根据选定选项选择要隐藏/显示的字段
javascript、jquery、html、forms
编辑：(重述代码错误)
我创建了一个包含几个字段的表单，通过下拉列表进行选择。
这样做很好，我可以将数据保存到数据库中。
但问题是，当我需要用表单编辑数据时，jQuery "change“函数不会被触发，显示的字段也不会被下拉(下拉的值也是保存)选中。
我怎样才能做到这一点？也许另一个jQuery函数会更好呢？
这是我的标记和代码：
html：
<body>
<div class="div1">
<label class="label1">label1</label>
<select
浏览 3提问于2013-08-22得票数 1
回答已采纳
1回答
如何清除动态输入字段
javascript、reactjs
我有一个有两个单选按钮的表格。根据您的选择，您的下一个字段将更改。我已经算出了一些计算结果。但是，我的一个问题是，如果在单选按钮之间切换，则无法清除文本字段。
对于单选按钮，有一个设置状态。
<label style={{ paddingRight: 50 }}>
<input
type="radio"
name="react-tips"
value="option1"
ch
浏览 4提问于2019-12-06得票数 0
1回答
Jquery多步表单收集和数据并添加编辑链接
jquery、forms、html
我正在编码一个多步表单。在此表单的末尾，我希望有一个div来显示每个条目的值。有些入口需要格式化。例如，我将长度和宽度作为两个独立的输入，并希望将结果显示为长度X宽度。而其他人都在同一条线上。我希望在每个条目旁边有一个编辑按钮。
我的Html
<form>
<article id="part1">
<input type"text" name="input1" id="input1">
<input type"text" name="input1" id=&
浏览 1提问于2012-07-05得票数 0
回答已采纳
3回答
使用jquery/javascript的无线电按钮过滤器
javascript、jquery、filter
有一个HTML表，它包含两个列(Source和Type)。为了过滤数据，有两个单选按钮。我能够过滤每个单选按钮的数据，但是我很难将两个单选按钮过滤器功能结合起来。
HTML代码
<form action="" id="Details">
<fieldset>
<label><input type="radio" name="Option1" value="Critical" >Critical</label>
<label><input
浏览 3提问于2014-03-23得票数 0
回答已采纳
2回答
如何根据单选按钮设置React初始状态？
javascript、reactjs、components
所以我有一个同级组件，它的状态受单选按钮的影响 constructor (props){
super(props);
this.state = {
selectedOption: "option1",
bgColor: '',
}
}
handleOptionChange = changeEvent => {
this.setState({
selectedOption: changeEvent.target.value,
bgColor: changeEvent.t
浏览 26提问于2021-07-06得票数 0
回答已采纳
2回答
是否可以使用“后退”按钮保留表单单选？
javascript、jquery、html、jquery-plugins、webforms
用户可以选择一个单选按钮，并且根据所选择的单选按钮，可以显示一个输入字段，要求提供附加信息。用户提交表单，然后说他们需要返回并对表单进行更改。当它们返回时，输入字段不再显示，但选择了正确的单选按钮。
答案只需要在IE8+中工作即可。使用jQuery作为解决方案的一部分也是一种选择。
--==2012年7月31日更新，使用jQuery插件simsalabim ==--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
浏览 2提问于2012-07-28得票数 0
2回答
如何在angular js中根据用户输入来构建对象？
angularjs、json
在我的表单中有单选按钮，所有单选按钮都来自json对象。用户点击提交按钮所有单选按钮数据存储到对象。
<form name="regForm">
<ul>
<li ng-repeat="q in que">
{{q.qText}} {{$index+1}}
<div ng-repeat="opt in q.options">
<input type
浏览 2提问于2017-02-06得票数 0
3回答
单选按钮在选中时不显示正确的字段。
javascript、html、jquery、css
我一直试图获得以下代码，以便根据选中的单选按钮显示相应的表行。现在发生的事情是，一旦在按钮之间进行选择，行就停止工作，不再切换。如果我将单选按钮切换到复选框，代码就会正常运行。
var $options = $('[id^="option"]');
$options.on('change', function() {
var $elementsToToggle = $('.' + this.value);
if (this.checked) {
$elementsToToggle.show();
} el
浏览 1提问于2021-02-10得票数 1
回答已采纳
1回答
当Template.mytemplate.field被放在主模板事件方法中时，HTML不会呈现
javascript、meteor、handlebars.js
在我的页面(html表单)中，我有两个选项(单选按钮)。根据用户的选择，我希望显示不同的输入域。以下是我的模板。
<template name="main">
<div class="radio">
<label>
<input id="radio1" name="optiontype" type="radio" value="1"> Option1
</label>
</div>
<
浏览 0提问于2014-01-28得票数 1
5回答
如何使复选框选中，单击“从下拉列表中选择一个选项: JS”
javascript、php、jquery、html
我有两个无线电台输入，当我从选择下拉菜单选择一个选项时，我想要检查。
我有这样一个选择框：
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister
浏览 6提问于2016-02-04得票数 1
回答已采纳
6回答
使用Jquery更改选中单选按钮ID
javascript、jquery、html、dom
我有一组单选按钮，我想用jQuery找到所选的单选按钮ID。
这是我的一组单选按钮，带有以下jQueryCode --每当我更改单选按钮时，我都会收到一个“未定义的”警报。
$("#radios").on("change", function() {
myID = $("#radios").nextAll(":radio:checked").first().attr('id');
alert(myID);
});
<script src="https://ajax.googleap
浏览 6提问于2015-05-11得票数 1
回答已采纳
1回答
显示“匹配时选择”选项
javascript、toggle、hide、show
当你键入一个匹配时，我很难给出一些选项，如果你没有，我是一个新的编码。
我只是不能让它按我想要的方式工作。
测试html：
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></opt
浏览 6提问于2022-04-04得票数 0
回答已采纳
1回答
我在表单上有两个问题，带有Option1和Option2的单选按钮，并且正在使用jQuery在隐藏的<div>元素中显示/隐藏其他问题。如果您对选项1回答“是”，则会显示第一个条件<div>，并附带一个关于选项2的附加问题。如果选项2的答案是“是”，则会显示第二个附加问题的条件<div>。
如果用户在选择"Yes“后将选项1的问题更改为"No”，我将隐藏第二个条件<div>。但是，如果用户再次选择选项1的“是”，则选项2的答案仍然是“是”，但是第二个条件<div>不会显示，因为没有change事件--用户必须选择
浏览 2提问于2020-05-25得票数 0
回答已采纳
1回答
根据ajax请求在单选之后附加div选项
jquery、ajax、forms
我使用jquery发出一个ajax请求，以确定在单击特定的单选按钮时是否应该打开一个div。我希望打开的div直接出现在所选的单选按钮下面。我有以下几个看起来很有效的方法：
<script language="javascript">
$(document).ready(function(){
$(".option_select").click(function() {
$(this).next().after($('#show_pop'));
$.ajax({
dataTy
浏览 4提问于2013-06-21得票数 1
0回答
如何查找在div之后选择了哪个单选按钮
javascript、jquery、html
如何在精确的div之后找到被选中的单选按钮？
这是一个示例：
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
<a href="#" title="Delete"></a>
</div>
<fieldset>
<input type="radi
浏览 8提问于2017-12-04得票数 0
回答已采纳
1回答
使用Knockout hasFocus绑定，如何跟踪一组单选按钮的焦点？
knockout.js、radio-button、focus
我使用的是敲除js，我有一些单选按钮，我已经应用了hasFocus绑定，这样我就可以跟踪哪个控件具有焦点。但它不适用于单选按钮。
你可以测试一下在这把小提琴上发生了什么：
文本框焦点可以观察到，但是单选按钮不能。如果只有两个单选按钮，我会得到更奇怪的结果。
Html：
<div><input type="text" data-bind="hasFocus: textFocus" /></div>
<div>
<label for="option1">
浏览 2提问于2015-04-27得票数 4
回答已采纳
3回答
在div中对齐单选按钮
html、css
我有一个div，并且在div中有单选按钮，那么根据div中同一行中的文本垂直对齐单选按钮最简单的方法是什么
echo"<div id=\"div{$id}\" ";?>
echo"</br>
<input type= radio name=\"{$id}\" value=\"{$option1}\" >
$option1
&
浏览 3提问于2013-05-29得票数 1
回答已采纳
1回答
水豚选择单选按钮不工作/元素单击“截获”
rspec、radio-button、capybara
我不能让rspec/capybara点击我的单选按钮。关于这个问题有很多类似的问题，但我找不到合适的答案。
我的HTML/CSS直接来自Bootstrap站点：
<div class="form-group mb-3">
<input autocomplete="off" checked="" class="btn-check" id="option1" name="options" type="radio">
<label class=&#
浏览 8提问于2022-02-01得票数 0
回答已采纳
3回答
引导程序单选按钮未显示
html、twitter-bootstrap、radio-button
我在bootstrap中使用了下面的html作为单选按钮
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label&
浏览 3提问于2014-04-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
