Question

我正在尝试找出如何通过JavaScript进行代码验证的方法，这样，如果仅单击其他技能复选框，则文本区域不能为空

     label><input type="checkbox" name="skill[]" value="CSS" 
    checked="checked"/>CSS</label>
      <label><input type="checkbox" name="skill[]" value="HTML" 
     />HTML</label> 
      <label><input type="checkbox" name="skill[]" value="JavaScript" 
     />JavaScript</label>
      <label><input type="checkbox" name="skill[]" value="management" 
   />management experience</label>
      <label><input type="checkbox" name="skill[]" value="PHP" 
    />PHP</label>
      <label><input type="checkbox" name="skill[]" value="other" />other 
     skills (please list bellow)</label>
      <br/><br/>
      <label>Other Skills:</label>
      <textarea rows="4" cols="50" name="otherskills" placeholder="Enter 
        any other skills that would be usefull for the job..."></textarea>

Answer 1

您可以像下面这样在红色文本区域边框

if(checkcount == 1 && checkedother == true && otherskill == ""){
           //console.log(otherskill == "")
           $("[name='otherskills'").css('border', '1px solid red');

       }else{
          $("[name='otherskills'").css('border', '');
       }

检查支票== 1 && checkother == true && otherskill ==“”

 function check(){
   //console.log($("[name='skill[]'").val());
   var checkedother = false;
   var otherskill = $("[name='otherskills'").val();
  $("[name='skill[]'").each(function () {
       var checked = (this.checked ? $(this).val() : "");


       if(checked == "other"){
           checkedother = true;
       }
  });

  if(checkedother == true && otherskill == ""){
           //console.log(otherskill == "")
           $("[name='otherskills'").css('border', '1px solid red');

       }else{
          $("[name='otherskills'").css('border', '');
       }

  return false;

}

function check(){
   //console.log($("[name='skill[]'").val());
   var checkedother = false;
   var otherskill = $("[name='otherskills'").val();
   var checkcount = 0;
  $("[name='skill[]'").each(function () {
       var checked = (this.checked ? $(this).val() : "");
       if(checked != "") checkcount++;
       
       if(checked == "other"){
           checkedother = true;
       }
  });
  
  if(checkcount == 1 && checkedother == true && otherskill == ""){
           //console.log(otherskill == "")
           $("[name='otherskills'").css('border', '1px solid red');
          
       }else{
          $("[name='otherskills'").css('border', '');
       }
  
  return false;
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" onsubmit="return check();"> 
 <label><input type="checkbox" name="skill[]" value="CSS" 
    checked="checked"/>CSS</label>
      <label><input type="checkbox" name="skill[]" value="HTML" 
     />HTML</label> 
      <label><input type="checkbox" name="skill[]" value="JavaScript" 
     />JavaScript</label>
      <label><input type="checkbox" name="skill[]" value="management" 
   />management experience</label>
      <label><input type="checkbox" name="skill[]" value="PHP" 
    />PHP</label>
      <label><input type="checkbox" name="skill[]" value="other" />other 
     skills (please list bellow)</label>
      <br/><br/>
      <label>Other Skills:</label>
      <textarea rows="4" cols="50" name="otherskills" placeholder="Enter 
        any other skills that would be usefull for the job..."></textarea>
        
        <button>Send</button>
  </form>

Answer 2

您可以检查checked输入的长度以及textarea。

const textArea = document.querySelector('textarea');
const btn = document.querySelector('button');

let count = 0;

btn.addEventListener('click', function(e) {
    count = document.querySelectorAll('input:checked').length;
    if(count > 0 && textArea.value.length == 0) { 
        alert('Please enter some text');
        return;
    }
    console.log('Success');
});

<label><input type="checkbox" name="skill[]" value="CSS" 
    checked="checked"/>CSS</label>
<label><input type="checkbox" name="skill[]" value="HTML" 
     />HTML</label> 
<label><input type="checkbox" name="skill[]" value="JavaScript" 
     />JavaScript</label>
<label><input type="checkbox" name="skill[]" value="management" 
   />management experience</label>
<label><input type="checkbox" name="skill[]" value="PHP" 
    />PHP</label>
<label><input type="checkbox" name="skill[]" value="other" />other 
     skills (please list bellow)</label>
      <br/><br/>
<label>Other Skills:</label>
<textarea rows="4" cols="50" name="otherskills" placeholder="Enter 
        any other skills that would be usefull for the job..."></textarea>
<button>Submit</button>

Answer 3

将类.lastitem添加到最后一个复选框并调用下面的函数

$(":checkbox").click(countChecked);

function countChecked() {
                if ($(".lastitem > input").is(':checked')) {
                    $("#otherskills").show();
                    //document.getElementById("otherskills").disabled = false;
                }
                else {
                    $("#otherskills").hide();
                    //document.getElementById("otherskills").disabled = true;
                }
            }

HTML

<input type="checkbox" name="skill[]" value="CSS" 
    checked="checked"/>CSS</label>
      <label><input type="checkbox" name="skill[]" value="HTML" 
     />HTML</label> 
      <label><input type="checkbox" name="skill[]" value="JavaScript" 
     />JavaScript</label>
      <label><input type="checkbox" name="skill[]" value="management" 
   />management experience</label>
      <label><input type="checkbox" name="skill[]" value="PHP" 
    />PHP</label>
      <label><input type="checkbox" name="skill[]" value="other" />other 
     skills (please list bellow)</label>
      <br/><br/>
      <label>Other Skills:</label>
      <textarea rows="4" cols="50" class=".lastitem" name="otherskills" placeholder="Enter 
        any other skills that would be usefull for the job..."></textarea>

仅勾选某个复选框时，必须将textarea写入

3 个答案: