Question

我尝试制作类似的工作，在我的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的理解还不够高。任何帮助评论都非常感谢！

Answer 1

您需要做出一些更改：

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

Answer 2

试试这个

<强> 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

Answer 3

在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');

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

Answer 4

因为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';
      }
}

来自维也纳的问候

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

4 个答案: