Question

提交后如何突出显示单选按钮？示例代码：

<form name="myForm" onsubmit="return changeColor()" id="form">
    <h1>QUESTIONS</h1>

    <span>Question No. 1.)</span>What is your favorite food?<br />
    <input name="one" type="radio" value="yes" />A. Hi<br />
    <input name="one" type="radio" value="no"  />B. Hello <br />
    <input name="one" type="radio" value="no"  />C. Ahh<br />
    <input name="one" type="radio" value="no"  />D. Kitkat<br />

    <span >Question No. 2.)</span>What is your favorite color?<br />
    <input name="two" type="radio" value="no"  />A. Hi<br />
    <input name="two" type="radio" value="yes"  />B. Hello<br />
    <input name="two" type="radio" value="no"  />C. Ahh<br />
    <input name="two" type="radio" value="no"  />D. Kitkat<br />

    <span >Question No. 2.)</span>What is your favorite color?<br />
    <input name="three" type="radio" value="no"  />A. Hi<br />
    <input name="three" type="radio" value="yes"  />B. Hello<br />
    <input name="three" type="radio" value="no"  />C. Ahh<br />
    <input name="three" type="radio" value="no"  />D. Kitkat<br />

    <span >Question No. 2.)</span>What is your favorite color?<br />
    <input name="three" type="radio" value="no"  />A. Hi<br />
    <input name="three" type="radio" value="yes"  />B. Hello<br />
    <input name="three" type="radio" value="no"  />C. Ahh<br />
    <input name="three" type="radio" value="no"  />D. Kitkat<br />

之后，提交，值为yes的单选按钮应该突出显示。我是如何在javascipt中那样做的？

Answer 1

我发现很难找到输入的下一个兄弟，但以下工作很好：

首先，我已将每个输入及其文本放入单独的div元素中：

<form name="myForm" id="myForm">
    <h1>QUESTIONS</h1>

    <span>Question No. 1.)</span>What is your favorite food?</div>
    <div><input name="one" type="radio" value="yes" />A. Hi</div>
    <div><input name="one" type="radio" value="no"  />B. Hello </div>
    <div><input name="one" type="radio" value="no"  />C. Ahh</div>
    <div><input name="one" type="radio" value="no"  />D. Kitkat</div>

    <span >Question No. 2.)</span>What is your favorite color?</div>
    <div><input name="two" type="radio" value="no"  />A. Hi</div>
    <div><input name="two" type="radio" value="yes"  />B. Hello</div>
    <div><input name="two" type="radio" value="no"  />C. Ahh</div>
    <div><input name="two" type="radio" value="no"  />D. Kitkat</div>

    <span >Question No. 2.)</span>What is your favorite color?</div>
    <div><input name="three" type="radio" value="no"  />A. Hi</div>
    <div><input name="three" type="radio" value="yes"  />B. Hello</div>
    <div><input name="three" type="radio" value="no"  />C. Ahh</div>
    <div><input name="three" type="radio" value="no"  />D. Kitkat</div>

    <span >Question No. 2.)</span>What is your favorite color?</div>
    <div><input name="three" type="radio" value="no"  />A. Hi</div>
    <div><input name="three" type="radio" value="yes"  />B. Hello</div>
    <div><input name="three" type="radio" value="no"  />C. Ahh</div>
    <div><input name="three" type="radio" value="no"  />D. Kitkat</div>
    <div><input type="submit">
</form>

接下来，使用JavaScript，我已经改变了表格＆＃39; onsubmit＆＃39;功能，并阻止它提交表单信息。然后我遍历表单中的所有输入，检查他们的类型是否是＆＃39; radio＆＃39;并且它们的值是“是”，如果是这样，该函数会更改输入和文本所在的div的文本颜色。

function form_color_change(e){
    // Prevent the form from submitting
    e.preventDefault();

    // Gather collection of all inputs
    var inputs_collection = document.getElementsByTagName('input');
    var len = inputs_collection.length;
    // Iterate through inputs collection
    while(len--)
    {
        var input = inputs_collection[len];
        if(input.value == "yes" && input.type == "radio")
        {
            // If input type is 'radio' and value is 'true', color parent div text yellow
            input.parentNode.style.color = "#AAAA00";
        }
    }
}

// Change the forms default onsubmit event handler, to my own custom function (located above):
var form = document.getElementById("myForm");
form.onsubmit = form_color_change;

这似乎工作正常。

我在使用＆＃39; return false＆＃39;提交表单时遇到了一些问题。内联提交方法＆＃39; onsubmit＆＃39;事件处理程序，因此我之所以使用JavaScript。

这是一个有效的JSFiddle：http://jsfiddle.net/ShadeSpeed/407uc4ed/3/

我希望这有帮助！

丹

提交后突出显示单选按钮

1 个答案: