Question

我有两种形式。我希望用户通过上面的一个单选按钮选择其中一个。

我想要做的是获取单选按钮的值，并通过此值使其中一个表单启用。

所以我尝试使用JavaScript并输入无线电ID，但我没有成功：

<script>
    window.addEventListener('load', init);
    function init(){
        var radio = document.getElementsByName ("questions");
            for (var i=0; i<radios.length; i++) {
            if(radio[i].getElementById.checked == "questions_1") {
            radio[i].addEventListener(seleccionar);  
        }
    }

    function trigger() {
        elementsForm = document.forms['question'].elements;
        for (var y=0; y<elementsForm.length; y++) {
        elementsForm[y].disabled=false;
        }
    }

</script>

这是我的代码（HTML和CSS）：

.category_1 {
    height: 50px;
    padding-top: 2%;
}

.question {
    display: inline-flex;
    margin-left: 5%;
}

.q-text {
    font-weight: 600;
}

.q1 {
    width: 44%;
}

.q2 {
    width: 44%;
}

.form {
    display: inline-flex;
    margin-left: 5%;
}

.form.q1 {
    width: 44%;
}

.form.q2 {
    width: 44%;
}

.data {
    margin-top: 5%;
}

.data label {
    opacity: 0.5;
}

input[type=text] {
    width: 100%; 
}

select {
    width: 100%;
}

textarea {
    width: 98%;
}

input[type=submit] {
    display: block;
    margin: auto;
}

  <body>

<div class="category_1">

    <div class="question q1"><input type="radio" name="question" value="question_1" id="question_1">
    <div class="q-text">QUESTION 1</div></div>

    <div class="question q2"><input type="radio" name="question" value="question_2" id="question_2">
    <div class="q-text">QUESTION 2</div></div>

</div>

<div class="form q1">
<form name="q1" method="post" action="">

<div class ="data">
    <label for="others">Name:</label>
    <input type="text" name="name" disabled>     
</div>

<div class="data">
        <label for="others">Select an item:</label>
        <select name="items-q1" disabled>
            <option value="it1">item 1</option>
            <option value="it2">item 2</option>
            <option value="it3">item 3</option>
            <option value="it4">item 4</option>
        </select>
</div>

<div class="data">
        <label for="others">Anything else?</label>
        <textarea name="more" disabled></textarea>
</div>

<div class="data">
        <input type="submit" value="submit" disabled>
</div>
</form>
</div>


<div class="form q2">
    <form name="q2" method="post" action="">

<div class ="data">
    <label for="others">Name:</label>
    <input type="text" name="name" disabled>    
</div>

<div class ="data">
<label for="others">Choose an option:</label><br>
<input type="radio" name="option" value="o1" disabled><label for="others">1</label>
<input type="radio" name="option" value="o2" disabled><label for="others">2</label>     
</div>    


<div class="data">
        <label for="others">Anything else?</label>
        <textarea name="more" disabled></textarea>
</div>    


<div class="data">
        <input type="submit" value="submit" disabled>
</div>
</form>
</div> 
</body>

我真的很感激任何建议。

Answer 1

首先，我注意到你的错误名称是收音机它的“问题”不是“问题”

<script>
    var rad = document.getElementsByName('question');
    for(var i = 0; i < rad.length; i++) {
        rad[i].onclick = function() {
        if(this.value == "questions_1") {
        //input logic to display form
        //This is where you run isTrue() Function
           isTrue(data);
        }
        else{
         //This is where you run isFalse() function
         isFalse(data);
        }
          };
        }
//Function to run if its true
    function isTrue(data){
       //something equals something
    }

//Function to run if its false
function isFalse(data){
   //something equals something
}
</script>

Reference Link

Answer 2

<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
    rad[i].onclick = function () {
        if(this.value == "question_1") {
        e1();
        }else {
        e2();    
        }
    };
}
    
function e1() {
    var eform1 = document.querySelectorAll('.q1 input[type=text], .q1 select, .q1 textarea, .q1 input[type=submit]');
    for(var i = 0; i < eform1.length; i++) {
    eform1[i].disabled = false;
    }
}
    
function e2() {
    var eform2 = document.querySelectorAll('.q2 input[type=text], .q2 input[type=radio], .q2 textarea, .q2 input[type=submit]');
    for(var i = 0; i < eform2.length; i++) {
    eform2[i].disabled = false;
    }
}    
</script>

通过输入无线电ID启用表单（已选中）

2 个答案: