Question

我想以带有2个复选框的形式更改选择元素。

如果选中了框1，则选择将处于活动状态；如果选中了框2，则选择应更改为文本输入。

重要的是，每个字段离开后必须保持空白。

<script type="text/javascript">
function fun1() {
var xx = document.getElementById('radio1');
if(xx==1)
{
    document.getElementById('textin').style.display = "block";
}
else if(xx==2)
{
    document.getElementById('selectin').style.display = "block";
}
else
{
}}
</script>



<form  method="post"  name="multiform" id="form8" action="">
<label>Formular</label><br>

<input id="textin" type="text" placeholder="test1">

<select id="selectin">
<option ></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</form>

<input id="radio1" type="radio" name="select" value="1" checked>INPUT Text
<input id="radio1" type="radio" name="select" value="2">SELECT from

Answer 1

您的代码几乎是正确的，您只需要进行一些更改。

您选择这样的单选框

var xx = document.getElementById('radio1');

，但请记住，您的id引用只是返回它找到的第一个元素。这样一来，您需要选择所有单选框并向其添加更改事件。然后将您的逻辑放在这里。

这是经过修改的javascript代码

// select all of your radio box
var radio_boxes = document.querySelectorAll('input[name="select"]');
// then loop through all of your input element and add change event 
radio_boxes.forEach(function(radiobox){
   radiobox.addEventListener('change', checkForRadioboxChage);
});  


// this function will execute when radio box is changed. 
function checkForRadioboxChage(event){
   var value = event.target.value;
   if(value === "1"){
        hideAndShow(true);
   } else if(value === "2"){
        hideAndShow(false);
   }
}

// this function will hide and show the select and input box
function hideAndShow(isTextShow){
    var text_input = document.getElementById('textin'),
        select_input = document.getElementById('selectin');
    if(isTextShow){
        // display text input and hide select input
        text_input.style.display= "block";
        select_input.style.display = "none";
        // clear hidden input 
        select_input.value = "";
    } else {
       text_input.style.display= "none";
       select_input.style.display = "block";
       // clear hidden input 
       text_input.value = "";
    } 

}

这是HTML代码

<form  method="post"  name="multiform" id="form8" action="">
<label>Formular</label><br>

<input id="textin" type="text" placeholder="test1">

<select id="selectin" style="display: none;">
<option ></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</form>

<input id="radio1" type="radio" name="select" value="1" checked>INPUT Text
<input id="radio1" type="radio" name="select" value="2">SELECT from

我我认为这将帮助您了解工作流程...

Answer 2

这是我的方法。我采取了一些自由措施，将HTML格式化为更具语义，并在脚本上添加了注释。随时询问是否不清楚。

<!doctype html>
<html>
    <meta charset="utf-8" />
    <body>
        <form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
            <label for="radio1">INPUT Text</label>
            <input id="radio1" type="radio" name="select" checked />
            <label for="radio2">SELECT from</label>
            <input id="radio2" name="select" type="radio" />
            <label id="textLabel" for="textin">Formular
                <input id="textin" type="text" placeholder="test1" />
            </label>
            <label id="selectLabel" for="selectin">Items
                <select id="selectin">
                  <option selected></option>
                  <option value="6">item 6</option>
                  <option value="7">item 7</option>
                  <option value="8">item 8</option>
                  <option value="9">item 9</option>
                </select>
            </label>
        </form>
        <script>
function toggleRadio() { // will activate when the form will change.
    var radio1 = document.getElementById('radio1'); // radio 1
    var radio2 = document.getElementById('radio2'); // radio 2
    if (radio1.checked == true) { // if the first checked display input and hide select
        document.getElementById('textLabel').style.display = 'block';
        document.getElementById('selectLabel').style.display = 'none';
        document.getElementById('selectin').selectedIndex = 0; // clear selected option
    }
    else { // because you got only 2 option you don't have to use another condition
        document.getElementById('textLabel').style.display = 'none';
        document.getElementById('selectLabel').style.display = 'block';
        document.getElementById('textin').value = ''; // clear input
    }
}
toggleRadio(); // call the function
        </script>
    </body>
</html>

祝你好运！

使用2按钮将选择更改为输入

2 个答案: