英文:
Show div only in case it has value in js
问题
我打算，如果单选按钮的div是“是”，则显示一开始就具有"display: none"的div。如果不是，保持该div隐藏。
英文:
I have the following code to show values in a form:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var data = [
{Queda: "Sim", Outro: "Teste1", },
];
for (var i = 0; i < data.length; i++) {
var Queda = data[0].Queda;
var Outro = data[0].Outro;
if(Queda == 'Sim'){
$('#quedpresa').prop('checked' , true);
}else if(Queda == 'Não'){
$('#quedpresa1').prop('checked' , true);
}
$('#quedpressa1').val(Outro);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dropdown-item btn btn-warning upd_qued"><i class="metismenu-icon pe-7s-note"></i> Alterar</a>
<form method="POST" class="row g-3 insquedaa2">
<div class="col-xs-6 col-sm-3">
<label class="form-label">Queda Presenciada? </label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
<label for="quedpresa" class="labradio">Sim</label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
<label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
</div>
<div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
<label for="quedpressa1" class="form-label">Outro </label>
<input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
</div>
</form>
<!-- end snippet -->
I intend that if the div of the radio button is YES, it shows the div that has display none right at the beginning. If not keep the div hidden.
答案1
得分: 1
这是您提供的代码部分的翻译：
var data = [
{ Queda: "Sim", Outro: "Teste1" },
];
for (var i = 0; i < data.length; i++) {
var Queda = data[0].Queda;
var Outro = data[0].Outro;
if (Queda == 'Sim') {
$('#quedpresa').prop('checked', true);
$('#quedpresss').show();
} else if (Queda == 'Não') {
$('#quedpresa1').prop('checked', true);
}
$('#quedpresa').click(() => $('#quedpresss').show());
$('#quedpresa1').click(() => $('#quedpresss').hide());
$('#quedpressa1').val(Outro);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dropdown-item btn btn-warning upd_qued"><i class="metismenu-icon pe-7s-note"></i> Alterar</a>
<form method="POST" class="row g-3 insquedaa2">
<div class="col-xs-6 col-sm-3">
<label class="form-label">Queda Presenciada? </label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
<label for="quedpresa" class="labradio">Sim</label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
<label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
</div>
<div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
<label for="quedpressa1" class="form-label">Outro </label>
<input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
</div>
</form>
这些是代码部分的翻译，没有其他内容。
英文:
Well then use jQuery to show it right there where you want it to show (also, click listeners are added to toggle them):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var data = [
{Queda: "Sim", Outro: "Teste1", },
];
for (var i = 0; i < data.length; i++) {
var Queda = data[0].Queda;
var Outro = data[0].Outro;
if(Queda == 'Sim'){
$('#quedpresa').prop('checked' , true);
$('#quedpresss').show();
}else if(Queda == 'Não'){
$('#quedpresa1').prop('checked' , true);
}
$('#quedpresa').click(()=>$('#quedpresss').show());
$('#quedpresa1').click(()=>$('#quedpresss').hide());
$('#quedpressa1').val(Outro);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dropdown-item btn btn-warning upd_qued"><i class="metismenu-icon pe-7s-note"></i> Alterar</a>
<form method="POST" class="row g-3 insquedaa2">
<div class="col-xs-6 col-sm-3">
<label class="form-label">Queda Presenciada? </label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
<label for="quedpresa" class="labradio">Sim</label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
<label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
</div>
<div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
<label for="quedpressa1" class="form-label">Outro </label>
<input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
</div>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论