Question

我的代码正常工作，我只需要在没有选中收音机的情况下再按继续，在问题结束时它会显示require。我不知道如何使用JavaScript来做到这一点。

我也试过questions[j].className = "highlight";

HTML：

<form>
   <div class="str_Radio">
     <p> 1. </p>
     <label> I cant make this work. </label>
     <div class="strQuestion">
       <input type="radio" name="Dq[1]" value="1">1 
       <input type="radio" name="Dq[1]" value="2">2
       <input type="radio" name="Dq[1]" value="3">3 
       <input type="radio" name="Dq[1]" value="4">4
       <input type="radio" name="Dq[1]" value="5">5 
       <input type="radio" name="Dq[1]" value="6">6
       <input type="radio" name="Dq[1]" value="7">7 
       <input type="radio" name="Dq[1]" value="8">8
       <input type="radio" name="Dq[1]" value="9">9 
       <input type="radio" name="Dq[1]" value="10">10
       </div>
       </div><!-- 11 -->

       <div class="str_Radio">
       <p> 2. </p>
       <label> this will not work 2. </label>
       <div class="strQuestion">
       <input type="radio" name="iq[1]" value="1">1 
       <input type="radio" name="iq[1]" value="2">2
       <input type="radio" name="iq[1]" value="3">3 
       <input type="radio" name="iq[1]" value="4">4
       <input type="radio" name="iq[1]" value="5">5 
       <input type="radio" name="iq[1]" value="6">6
       <input type="radio" name="iq[1]" value="7">7 
       <input type="radio" name="iq[1]" value="8">8
       <input type="radio" name="iq[1]" value="9">9 
       <input type="radio" name="iq[1]" value="10">10
       </div>
       </div><!-- 22 -->

  <button id="link" name="data" type="button" onclick="return validateForm('strQuestion');">Continue</button>
</form>

CSS：

.highlight{
   content: "*";
   color:red;
}

JavaScript的：

 function validateForm(cname) {
        var questions = document.getElementsByClassName(cname);
            formValid = true;
        for( var j=0; j<questions.length; j++ ) {
            if( !isOneInputChecked(questions[j], "radio") ) {
                formValid = false;

                questions[j].style.border = "2px solid red";
                // i use loop to target each question here i change css.

            }
        }
        return formValid;
}

function isOneInputChecked(sel) {
        var inputs = sel.getElementsByTagName('input');
        for (var k=0; k<inputs.length; k++) {
            if( inputs[k].checked )
                return true;
        }
        // End of the loop, return false
        return false;
}

我的代码返回显示真的很糟糕，它不会针对那些不再检查的那些。我将如何完成这个？谢谢。

Answer 1

使用CSS :: after伪元素就可以了。

CSS-Tricks在:: after / ::之前的伪元素here上有很好的写作。

＆＃13;

.highlight::after {
  content: "* require";
  color:red;
}

＆＃13;

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validateForm(cname) {
        var questions = document.getElementsByClassName(cname);
            formValid = true;
        for( var j=0; j<questions.length; j++ ) {
            if( !isOneInputChecked(questions[j], "radio") ) {
                formValid = false;

                questions[j].style.border = "2px solid red";
                questions[j].className = "highlight";
                // i use loop to target each question here i change css.

            }
        }
        return formValid;
}

function isOneInputChecked(sel) {
        var inputs = sel.getElementsByTagName('input');
        for (var k=0; k<inputs.length; k++) {
            if( inputs[k].checked )
                return true;
        }
        // End of the loop, return false
        return false;
}
</script>
</head>
<body>
<form>
                <div class="str_Radio">
                <p> 1. </p>
                <label> I cant make this work. </label>
                <div class="strQuestion">
                <input type="radio" name="Dq[1]" value="1">1 
                <input type="radio" name="Dq[1]" value="2">2
                <input type="radio" name="Dq[1]" value="3">3 
                <input type="radio" name="Dq[1]" value="4">4
                <input type="radio" name="Dq[1]" value="5">5 
                <input type="radio" name="Dq[1]" value="6">6
                <input type="radio" name="Dq[1]" value="7">7 
                <input type="radio" name="Dq[1]" value="8">8
                <input type="radio" name="Dq[1]" value="9">9 
                <input type="radio" name="Dq[1]" value="10">10
                </div>
                </div><!-- 11 -->

                <button id="link" name="data" type="button" onclick="return validateForm('strQuestion');">Continue</button>
</form>
</body>
</html>

＆＃13;

JavaScript最后添加了css文本

1 个答案: