끝 부분에 CSS 텍스트를 추가하는 자바 스크립트

내 코드가 작동 중입니다. 라디오가 선택되어 있지 않은 상태에서 계속 누르면 필요한 경우에만 질문의 마지막에 require이 표시됩니다. 자바 스크립트로 어떻게 사용하는지 모르겠습니다.끝 부분에 CSS 텍스트를 추가하는 자바 스크립트

는 또한 시도 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; 
}

자바 스크립트 :

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; 
}

내 코드 반환 쇼는 정말 못해, 그것을 werid 더 이상 점검되지 않는 대상을 대상으로하십시오. 이걸 어떻게 완성 할까? 고맙습니다.

출처

2015-01-21 user3233074

CSS :: after 의사 요소를 사용하면 트릭을 수행 할 수 있습니다.

CSS-Tricks에는 ::/before before 의사 요소 here에 대한 훌륭한 글이 있습니다.

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

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

출처

2015-01-21 04:23:19 Mike

은 내가 – user3233074

당신이 시도 할 수 있습니다 전에 다시 내 코드를 붙여 tryied? 일단 나는 2 개의 질문이 더 이상 작동하지 않는다. – user3233074

작동하지 않는 것은 무엇입니까? 원래 게시 한 코드에없는 질문 [j] .className = "highlight"를 포함시켜야합니다. – Mike

끝 부분에 CSS 텍스트를 추가하는 자바 스크립트

답변

관련 문제