少なくとも1つのチェックボックスがチェックされていることを確認する

Question

複数のチェックボックスがあるフォームがあります。少なくとも1つがチェックされていることを確認するためにJavaScriptを使用したいと思います。これは私が今持っているものですが、何が選択されてもアラートがポップアップします。

JS（間違った）

function valthis(){ 
if (document.FC.c1.checked) { 
    alert ("thank you for checking a checkbox") 
    } else { 
    alert ("please check a checkbox") 
    } 
} 

<p>Please select at least one Checkbox</p> 
<br> 
<br> 
<form name = "FC"> 
<input type = "checkbox" name = "c1" value = "c1"/> C1 
<br> 
<input type = "checkbox" name = "c1" value = "c2"/> C2 
<br> 
<input type = "checkbox" name = "c1" value = "c3"/> C3 
<br> 
<input type = "checkbox" name = "c1" value = "c4"/> C4 
<br> 
</form> 
<br> 
<br> 

<input type = "button" value = "Edit and Report" onClick = "valthisform();"> 

HTMLだから私はJSでやってしまったことは、このでした：

function valthisform(){ 
var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked 

if (chkd == true){ 

} else { 
    alert ("please check a checkbox") 
} 

} 

残りの課題に合わせて「ありがとう」の部分を削除することにしました。本当にありがとう、すべてのアドバイスは本当に助けてくれました。

Answer 1

document.FC.c1のように参照する予定がある場合は、同じ名前のチェックボックスを2つ使用しないでください。 c1という名前の複数のチェックボックスがある場合、どのブラウザを参照しているのかは分かりますか？

ここには、ページ上のチェックボックスがオンになっているかどうかをチェックする非jQueryソリューションがあります。

var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked); 

あなたが上someを呼び出すことができる配列にdocument.querySelectorAllによって返さNodeListを変換するArray.prototype.slice.call一部を必要としています。

Answer 2

これは動作するはずです：

function valthisform() 
{ 
    var checkboxs=document.getElementsByName("c1"); 
    var okay=false; 
    for(var i=0,l=checkboxs.length;i<l;i++) 
    { 
     if(checkboxs[i].checked) 
     { 
      okay=true; 
      break; 
     } 
    } 
    if(okay)alert("Thank you for checking a checkbox"); 
    else alert("Please check a checkbox"); 
} 

をあなただけのコメント、コードに関する質問がある場合。私は、パフォーマンスを向上させるためにl=checkboxs.lengthを使用

---

^{。あなたは自分の名前を経由してフォーム入力にアクセスすることはできませんhttp://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/}

Answer 3

Check this.

を参照してください。代わりにdocument.getElementsメソッドを使用してください。

Answer 4

jQueryを使用すると、最後のチェックボックスをオフにしないようにすることができます。

$('input[type="checkbox"][name="chkBx"]').on('change',function(){ 
 
    var getArrVal = $('input[type="checkbox"][name="chkBx"]:checked').map(function(){ 
 
    return this.value; 
 
    }).toArray(); 
 
    
 
    if(getArrVal.length){ 
 
    //execute the code 
 
    $('#cont').html(getArrVal.toString()); 
 
    
 
    } else { 
 
    $(this).prop("checked",true); 
 
    $('#cont').html("At least one value must be checked!"); 
 
    return false; 
 
    
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" name="chkBx" value="value1" checked> Value1 
 
</label> 
 
<label> 
 
    <input type="checkbox" name="chkBx" value="value2"> Value2 
 
</label> 
 
<label> 
 
    <input type="checkbox" name="chkBx" value="value3"> Value3 
 
</label> 
 

 
<div id="cont"></div>

Answer 5

< script type = "text/javascript" src = "js/jquery-1.6.4.min.js" > </script > 
    < script type = "text/javascript" > 

function checkSelectedAtleastOne(clsName) { 
    if (selectedValue == "select") 
     return false; 

    var i = 0; 
    $("." + clsName).each(function() { 

     if ($(this).is(':checked')) { 
      i = 1; 
     } 

    }); 

    if (i == 0) { 
     alert("Please select atleast one users"); 
     return false; 
    } else if (i == 1) { 
     return true; 
    } 

    return true; 

} 

$(document).ready(function() { 
    $('#chkSearchAll').click(function() { 

     var checked = $(this).is(':checked'); 
     $('.clsChkSearch').each(function() { 
      var checkBox = $(this); 
      if (checked) { 
       checkBox.prop('checked', true); 
      } else { 
       checkBox.prop('checked', false); 
      } 
     }); 

    }); 

    //for select and deselect 'select all' check box when clicking individual check boxes 
    $(".clsChkSearch").click(function() { 

     var i = 0; 
     $(".clsChkSearch").each(function() { 

      if ($(this).is(':checked')) {} 
      else { 

       i = 1; //unchecked 
      } 

     }); 

     if (i == 0) { 
      $("#chkSearchAll").attr("checked", true) 
     } else if (i == 1) { 

      $("#chkSearchAll").attr("checked", false) 
     } 

    }); 

}); 

</script > 

Answer 6

バニラJS：

var checkboxes = document.getElementsByClassName('activityCheckbox'); // puts all your checkboxes in a variable 

function activitiesReset() { 
    var checkboxesChecked = function() { // if a checkbox is checked, function ends and returns true. If all checkboxes have been iterated through (which means they are all unchecked), returns false. 
     for (var i = 0; i < checkboxes.length; i++) { 
      if (checkboxes[i].checked) { 
       return true; 
      } 
     } 
     return false; 
    } 
    error[2].style.display = 'none'; // an array item specific to my project - it's a red label which says 'Please check a checkbox!'. Here its display is set to none, so the initial non-error label is visible instead. 
     if (submitCounter > 0 && checkboxesChecked() === false) { // if a form submit has been attempted, and if all checkboxes are unchecked 
      error[2].style.display = 'block'; // red error label is now visible. 
     } 
} 

for (var i=0; i<checkboxes.length; i++) { // whenever a checkbox is checked or unchecked, activitiesReset runs. 
    checkboxes[i].addEventListener('change', activitiesReset); 
} 

説明：フォームが試みられている送信すると
、これはあなたのチェックボックスセクション「を更新しますユーザーにまだチェックマークがない場合はチェックボックスをチェックするようにユーザーに通知するためのラベルです。チェックボックスがチェックされていない場合、隠れた「エラー」ラベルが表示され、「チェックボックスをチェックしてください！」と表示されます。ユーザーが少なくとも1つのチェックボックスをチェックすると、赤いラベルが再び瞬時に隠され、元のラベルが表示されます。ユーザーがすべてのチェックボックスをもう一度オフにすると、赤いラベルがリアルタイムで戻ります。これは、あなたが少なくとも1つのチェックボックスは、この単純なコードを使用してチェックするかしないことを確認することができます。あなたはまた、あなたのメッセージをドロップすることができ.addEventListener('change', function(){});

Answer 7

として書かれたJavaScriptのonchangeイベント（によって可能になる。

リファレンスLinkは

<label class="control-label col-sm-4">Check Box 2</label> 
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br /> 
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br /> 

<script> 
function checkFormData() { 
    if (!$('input[name=checkbox2]:checked').length > 0) { 
     document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null"; 
     return false; 
    } 
    alert("Success"); 
    return true; 
} 
</script>