如果CMS的复选框为true,则切换文本框

时间:2014-10-07 09:25:40

标签: javascript html

我尝试制作类似的工作,在我的CMS中实现它:

固定CMS部分:

<div class="RadioList" id="radioListId">
    <div class="TxtLbl" id="textLblId"> Question </div>
    <span id="spanId">
        <input value="yes"></input>
        <input value="no"></input>
    </span>
</div>

<div class="TxtBox" id="txtBoxId">
some text
</div>

拥有JS部分,如:

function EnableTextbox(radioListId,spanId)
{
    if(document.getElementById(radioListId).inputValue == "yes")
        document.getElementById(textBoxId).visibility = visible;
    else
        document.getElementById(textBoxId).visibility = hidden;
}

但我不太确定如何正确使用它 - 我对js的理解还不够高。 任何帮助评论都非常感谢!

4 个答案:

答案 0 :(得分:1)

您需要做出一些更改:

  • 输入需要type="radio"来表示这些是单选按钮。
  • 输入需要有一个共同的name="whatever"来表示两者都属于同一组且无法同时检查。
  • 输入需要在开始/结束标记之间添加文本,此文本显示在单选按钮旁边。
  • 您需要在单击/更改按钮时调用javascript函数,并在内部检查选择了哪个无线电。
  • 通过将this写为函数变量,将单选按钮引用传递给javascript函数。
  • 在您检索单选按钮引用的函数内,您可以根据需要为变量命名。
  • 您使用visiblehidden作为变量,但未定义这些变量。它应该是字符串或布尔值。我更喜欢为此目的使用css。

这是 Example Fiddle

HTML:

<div class="RadioList" id="radioListId">
    <div class="TxtLbl" id="textLblId">Question</div> <span id="spanId">
        <input type="radio" value="yes" onclick="EnableTextbox(this);" name="Answer">Yes</input>
        <input type="radio" value="no"  onclick="EnableTextbox(this);" name="Answer">No</input>
    </span>
</div>
<div class="TxtBox" id="txtBoxId">some text</div>

JS:

function EnableTextbox(radioList) {
    if (radioList.value == "yes") document.getElementById("txtBoxId").style.visibility = "visible";
    else document.getElementById("txtBoxId").style.visibility = "hidden";
}

答案 1 :(得分:1)

试试这个

<强> HTML

<div class="RadioList" id="radioListId">
    <div class="TxtLbl" id="textLblId">Question</div> <span id="spanId">
        <input type="radio" value="yes" name="showhide"> Show</input>
        <input type="radio" value="no" name="showhide"> Hide</input>
    </span>
</div>
<div class="TxtBox" id="txtBoxId">some text</div>

<强>脚本

$(document).ready(function () {
    $("#txtBoxId").hide();
    $("input[name='showhide']").on("click", function () {
        var option = $(this).attr('value');
        if (option == "yes") {
            $("#txtBoxId").show();
        } else {
            $("#txtBoxId").hide();
        }
    });
});

Fiddle Sample

答案 2 :(得分:0)

在jQuery中

   <span id="spanId">
      <input type="radio" name="radiobutton" value="yes" />
      <input type="radio" name="radiobutton" value="no" />
   </span>



$('#spanId input:radio[name="radiobutton"]').change(function(){
    if($(this).val() === 'yes'){
       $('#txtBoxId').show();
    } else {
       $('#txtBoxId').hide();
    }
});

解释

$('#txtBoxId').show() = display:block;
$('#txtBoxId').hide() = display:none;

如果你想要可见度。

$('#txtBoxId').css('visibility','visible');
$('#txtBoxId').css('visibility','hidden');

如果您有任何疑问,请与我联系。

答案 3 :(得分:0)

因为onclick =&#34;&#34;已过时你应该使用element.addEventListener();

以下是 Fiddle!

中的示例

HTML:

<div class="RadioList" id="radioListId">
    <div class="TxtLbl" id="textLblId"> Question </div>
    <span id="spanId">
        <label><input type="radio" name="answer" id="yes" value="yes" />Yes</label>
        <label><input type="radio" name="answer" id="no" value="no"/>No</label>
    </span>
</div>

<div class="TxtBox" id="txtBoxId">
some text
</div>

JS:

var yes = document.getElementById('yes');
var no_ = document.getElementById('no');
if (yes.addEventListener) {
    yes.addEventListener ("RadioStateChange", OnChange, false);
    no_.addEventListener ("RadioStateChange", OnChange, false);
}
function OnChange(){
      if (yes.checked) {
          document.getElementById('txtBoxId').style.display = 'inline';
      }
      else {
          document.getElementById('txtBoxId').style.display = 'none';
      }
}

来自维也纳的问候