如果至少选中了一个复选框，则返回true，否则返回false

时间：2020-05-02 17:21:03

标签： javascript

我有四个复选框，我想验证是否至少选中了一个复选框。如果选中其中一个复选框，则返回true，否则返回false。以下是我尝试过的方法，但始终返回false。我只是不知道我哪里错了。我想尝试简单的for循环。

    const services = document.getElementsByClassName("services"); 
    function validate() {
      alert(validateServicesCheckbox(services));
    }
    function validateServicesCheckbox(cb) {
        for (let i = 0; i<cb.length; i++) {
          if (cb[i].checked === false) { 
            return false;
          } 
        }
        return true;
     }
<div class="row">
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox1" value="option1">
                      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox2" value="option2">
                      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox3" value="option3">
                      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox4" value="option4">
                      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
                    </div>
                  </div>
                  
                </div>
<div> <button onclick="validate()"> Click me</button></div>

3 个答案:

答案 0 :(得分：1)

您可以使用querSelectorAll并在启动循环之前将其初始化为false（如果您发现选中的话），将其设置为真

const services = document.querySelectorAll(".services"); 
    function validate() {
      alert(validateServicesCheckbox(services));
    }
    function validateServicesCheckbox(cb) {
       var result=false;
        for (let i = 0; i<cb.length; i++) {
          if (cb[i].checked ){ 
            result= true;
          } 
        }
        return result;
     }
<div class="row">
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox1" value="option1">
                      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox2" value="option2">
                      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox3" value="option3">
                      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox4" value="option4">
                      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
                    </div>
                  </div>
                  
                </div>
<div> <button onclick="validate()"> Click me</button></div>

答案 1 :(得分：1)

对于听起来像“至少一个”的条件，应颠倒检查：在循环中检查checbox是否已选中，并返回true，否则-如果所有复选框均未选中，则返回false 

#!/bin/bash
filedates=(20200420,20200420,20200420,20200419,20200419,20200419,20200416,20200416)

find_oldest_date (){
    arr="$1"
    echo "Searching for oldest date in directory..."
    for file in $arr; do
        currentDate=$file
        if [ $currentDate -lt $tempOldestDate ]; then
            oldestDateFound=$currentDate
        else
            oldestDateFound=$tempOldestDate
        fi
    done
    oldestDateFoundFormatted=`date -d $oldestDateFound +%Y-%m-%d`
    echo "Oldest date found in directory: "$oldestDateFoundFormatted
    printf "\n"
}

set_temp_oldest_date (){
    arr=$1
    echo "Setting temporary oldest date..."
    currentOldestDate=($arr[1])
    currentOldestDateFormatted=`date -d $currentOldestDate +%Y-%m-%d`
    echo "Temporary oldest date: "$currentOldestDateFormatted
    printf "\n"
}
find_three_files_with_oldest_date(){
    arr=$1
    i=0
    echo Searching for all three files with date: $oldestDateFoundFormatted ...
    for date in $arr; do
    currentDate=$date
    if [ $currentDate == $oldestDateFound ]; then
    ((i=i+1))
    fi
    done

    printf "\n"
    echo "*****************"
    echo "$i file(s) found"
    echo "*****************"
    printf "\n"
    filesMissing=$((3-$i))

    if [ $i == 3 ]; then
        echo "*****************"
        echo  All 3 files found
        echo "*****************"
    else
        echo "*****************"
        echo "$filesMissing file(s) missing"
        echo "*****************"
        printf "\n"
        echo $(remove_oldest)
        printf "\n"
        echo $(find_oldest_date)           
        echo $(find_three_files_with_oldest_date)
    fi
}
remove_oldest(){
        arr=$1
        echo "Removing files with date $oldestDateFound ..."
        delete="$oldestDateFound"
        result=("${arr[@]}")
        echo before: ${arr[@]}
        printf "\n"
        echo to delete: ${delete[@]}
        printf "\n"
        for i in $result; do
        for host in ${delete[@]}; do
        result=( "${result[@]/$host}" )
        done
        done
        echo after: ${result[@]}
        printf "\n"
        echo Starting new search with updated/filtered list of dates
        echo $(set_temp_oldest_date "${result[@]}")
        echo $(find_oldest_date "${result[@]}")
        echo $(find_three_files_with_oldest_date "${result[@]}")

}

set_temp_oldest_date "${filedates[@]}"
find_oldest_date "${filedates[@]}"
find_three_files_with_oldest_date "${filedates[@]}"

const services = document.getElementsByClassName("services"); 
    function validate() {
      alert(validateServicesCheckbox(services));
    }
    function validateServicesCheckbox(cb) {
      for (let i = 0; i<cb.length; i++) {          
            if(cb[i].checked) {
              return true
            }
        }
        return false;
     }

答案 2 :(得分：1)

以下是一种简单的解决方案，用于检查HTML页面中是否至少选中了一个复选框： 

function validate() {
  var allcheckboxes = document.querySelectorAll('input[type="checkbox"]');
  var isCheckedAny = Array.prototype.slice.call(allcheckboxes).some(x => x.checked);
  console.log(isCheckedAny);
}
<div class="row">
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox1" value="option1">
      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
    </div>
  </div>
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox2" value="option2">
      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
    </div>
  </div>
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox3" value="option3">
      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
    </div>
  </div>
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox4" value="option4">
      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
    </div>
  </div>

</div>
<div> <button onclick="validate()"> Click me</button></div>

此处使用的有关javascript代码的一些解释：-

Array.prototype.slice.call（）是将任何类似数组的对象转换为真实数组的快速方法。

some（）方法检查数组中的任何元素是否通过了 测试（作为功能提供）。

  • some（）方法对数组中存在的每个元素执行一次功能：

  • 如果找到函数返回真值的数组元素，则 some（）返回真（并且不检查其余的 值），否则返回false

我希望这会有所帮助！

相关问题
最新问题