如果我单击单选按钮，如何使不可见的文本框变得可见?

本文关键字：文本 单选按钮 何使不 如果 单击 | 更新日期: 2023-09-27 17:52:50

我写了一个asp c# WebApplication。

如果我点击某个单选按钮，我需要在asp文本框中"褪色"。(它们需要在我点击单选按钮后立即淡出)。我该怎么做呢?我应该使用JS吗?

如果我单击单选按钮，如何使不可见的文本框变得可见?

可以使用JavaScript创建"behavior"，使用CSS添加样式和效果。

下面是一个使用简单JavaScript的例子，不需要jQuery或其他库。脚本假设您使用visibility和opacity的组合来隐藏您的元素。

它是这样工作的:

  • 收听您单选按钮上的事件change。
  • 当用户选择单选按钮。
  • 选择单选按钮，添加类别fadeout。
  • CSS类fadeout包含创建动画效果的过渡。

CSS转场时，提供一种控制动画速度的方法改变CSS属性。而不是让属性发生变化立即生效，您可以在属性中进行更改放置在一段时间内。点击这里阅读更多内容https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

var txtBox = document.getElementById('txtBox');
var radioMale = document.getElementById('radioMale');
radioMale.addEventListener('change', function() {
  txtBox.classList.add('fadeout');
}.bind(this));
.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}
<input type="radio" name="gender" value="male" id="radioMale"> Male
<br>
<input type="text" id="txtBox">
<br>

这里有一个相反的例子，当用户选择单选按钮时，你可以在文本框中"淡入"动画。

var txtBox = document.getElementById('txtBox');
var radioMale = document.getElementById('radioMale');
radioMale.addEventListener('change', function() {
  txtBox.classList.add('fadein');
}.bind(this));
.fadeout {
  visibility: visible;
  opacity: 0;
}
.fadein {
  visibility: visible;
  opacity: 100;
  transition: visibility 0s 1s, opacity 1s linear;
}
<input type="radio" name="gender" value="male" id="radioMale"> Male
<br>
<input type="text" id="txtBox" class="fadeout">
<br>

try this

1)你的HTML 
<p>Show textboxes
    <input type="radio" name="radio1" id="r1" value="Show">Do nothing
    <input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>
2) Js code 
  $(document).ready(function () {
    $("#r1").click(function () {
        $(".text").fadeIn();
    });
    $("#r2").click(function () {
        $(".text").fadeOut();
    });
});
相关文章：