Question

我有3个单选按钮被批准和拒绝，还有4个文本字段和文本框..

如果我点击r1，则应隐藏所有文本字段和文本框。但如果我点击r2和r3，则应显示文本字段和文本框..

这是我用过的代码

if（approved.checked == true）{

  reason.style.visibility="hidden";

  Reason.style.visibility="hidden";
  sanction.style.visibility="display";
  sanctioned.style.visibility="display";
}

if(rejected.checked == true) {
    reason.disabled =false;
  reason.style.display="none";
  Reason.style.display="none";
  sanction.style.visibility="hidden";
  sanctioned.style.visibility="hidden";
}

当我点击这些单选按钮时，此代码首次正常工作。但如果点击被拒绝然后点击已批准则无法正常工作。

Answer 1

请勿混用显示和可见性属性，请使用其中一个。显示属性的Valid values是：inline |块| list-item |内联块|表|内联表| table-row-group | table-header-group |桌脚组|表格行table-column-group | table-column | table-cell |表格标题|没有|继承

可见性的有效值为：visible |隐藏|崩溃|继承

简答：使用可见代替显示。

所以你的代码可以是（假设变量是对合适的DOM元素的引用）：

if(approved.checked) {
  reason.disabled = true;   // keep symetry with next loop
  reason.style.visibility = "hidden";
  Reason.style.visibility = "hidden";
  sanction.style.visibility = "visible";
  sanctioned.style.visibility = "visible";
}

if(rejected.checked) {
  reason.disabled = false;
  reason.style.visibility = "hidden";
  Reason.style.visibility  = "hidden";
  sanction.style.visibility = "hidden";
  sanctioned.style.visibility = "hidden";
}

请注意，通过将表单控件放在另一个元素（比如div）中并隐藏它来更简单。但为什么不禁用它们呢？隐藏和展示它们可能会使用户烦恼，分散注意力或者只是简单地混淆用户。

Answer 2

在第一个而不是reason.style.visibility =“隐藏你可以使用jQuery函数.hide（）和.show（），

<script type="text/javascript">
    $(function () {

        $('input[type="radio"]').change(function () {
            if (this.id == r1) { 
                $('#textes').hide();
            }
            else
            {
                $('#textes').shwo();
            }
        })
        if (approved.checked == true)

    })
</script>

<div id="textes">
/*your chack  text fields and text boxes..*/
</div>

http://jsfiddle.net/rEK87/1/

Answer 3

根据您的示例和我们上面的评论，这就是您所追求的目标吗？

<强>标记：

<form>
    <input type="radio" name="rdo" id="r1" />
    <label for="r1">Approved</label>
    <input type="radio" name="rdo" id="r2" />
    <label for="r2">Rejected</label>
</form>
<div id="accepted">
    <p>This is the accepted block.</p>
</div>
<div id="rejected">
    <p>This is the rejected block.</p>
</div>

<强> CSS：

#accepted, #rejected
{
    display:none;
}

<强> jQuery的：

$(function(){
    $('#r1').click(function(e){
        $('#accepted').show();
        $('#rejected').hide();
    }); 

        $('#r2').click(function(e){
        $('#accepted').hide();
        $('#rejected').show();
    }); 
});

http://jsfiddle.net/rEK87/

如何动态显示文本框的值

3 个答案: