특정 확인란이 선택되어 있는지 확인하는 양식에 onsubmit 기능을 배치했습니다.
내가 가진 문제는 각 열에서 하나의 확인란 만 선택하면된다는 것입니다. 각 열에는 약 6 개의 다른 확인란이있는 총 3 개의 열이 있습니다. 열의 모든 확인란은 동일한 ID를 공유합니다 (이로 인해 나를 위해).
아래 스크립트는 작동하지만 각 열의 모든 상자를 선택해야합니다. 각 열에서 하나의 확인란이 선택된 경우에만 제출하도록 수정하려면 어떻게해야합니까?
<script type="text/javascript">
window.onload = function() {
var form = document.getElementById('uwpqsffrom_731');
form.onsubmit = function() {
var no1 = 0, no2 = 0, no3 = 0;
var list;
list = document.getElementsByName('taxo[0][term][]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no1++;
}
}
list = document.getElementsByName('taxo[1][term][]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no2++;
}
}
list = document.getElementsByName('taxo[2][call]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no3++;
}
}
list = document.getElementsByName('taxo[2][term][]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no3++;
}
}
if ( no1 == 0 || no2 == 0 || no3 == 0 )
{
alert("Please select at least one option from each section");
return false;
}
}
}
</script>
HTML :
동일한 ID를 가진 모든 확인란이 있음을 알 수 있습니다. 제출할 양식을 확인하려면 그중 하나만 확인하면됩니다.
<form id="uwpqsffrom_731" method="get" action="http://test.com/">
<div class="uform_title">Find Your Perfect Venue</div><input type="hidden" name="unonce" value="a92b348757"><input type="hidden" name="uformid" value="731"><input type="hidden" name="s" value="uwpsfsearchtrg">
<div class="uwpqsf_class tax-check-0 togglecheck">
<span class="taxolabel-0">Guests</span>
<input type="hidden" name="taxo[0][name]" value="number-of-guests">
<input type="hidden" name="taxo[0][opt]" value="1">
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="150-180">150-180</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="180-200">180-200</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="20-50">20-50</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="200-350">200-350</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="200-380">200-380</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="350-500">350-500</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="50-65">50-65</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="500-1000">500-1000</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="65-150">65-150</label>
</div>
<div class="uwpqsf_class tax-check-1 togglecheck">
<span class="taxolabel-1">Event Type</span>
<input type="hidden" name="taxo[1][name]" value="event-type">
<input type="hidden" name="taxo[1][opt]" value="1">
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner">Awards Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner-dance">Awards Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="barbat-mitzvah">Bar/Bat Mitzvah</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="cocktail-party">Cocktail Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner">Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner-dance">Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="networking-event">Networking Event</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="party">Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="vip-experience">VIP Experience</label>
</div>
<div class="uwpqsf_class tax-check-2 togglecheck">
<span class="taxolabel-2">Venue Preference</span>
<input type="hidden" name="taxo[2][name]" value="venue-locations">
<input type="hidden" name="taxo[2][opt]" value="">
<label><input type="checkbox" id="tchkb-2" name="taxo[2][call]" class="chktaxoall">All Venues</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="london-dungeon">London</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="madame-tussauds">New York</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="sea-life">Russia</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="stardome-4d">Spain</label>
</div>
<div class="uwpqsf_class uwpqsf_submit">
<input type="submit" id="uwpqsf_id_btn" value="Search" alt="[Submit]" class="usfbtn ">
</div>
</form>
원본을 약간 변경 javascript했지만 내 코드를 쉽게 복사하여 붙여 넣을 수 있습니다.
function test() {
var no1 = 0, no2 = 0, no3 = 0;
var list;
list = document.getElementsByName('taxo[0][term][]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no1++;
}
}
list = document.getElementsByName('taxo[1][term][]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no2++;
}
}
list = document.getElementsByName('taxo[2][call]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no3++;
}
}
list = document.getElementsByName('taxo[2][term][]');
for(i=0; i<list.length; i++)
{
if (list[i].checked)
{
no3++;
}
}
if ( no1 == 0 || no2 == 0 || no3 == 0 )
{
alert("Please select at least one option from each section");
return false;
}
}
죄송합니다. 약간 엉성한데. javascript없이는 잘 처리하지 못합니다. jQuery마크 업으로 인해 몇 가지 제한이있었습니다 (모두 플러그로 생성되었다고 말한대로 변경하지 않았습니다.
어쨌든 여기에 jsfiddle 도 있습니다.
(참고 : for이름이 다르기 때문에 마지막 열에 대해 두 번 해야했습니다 ...)
(note2 :를 사용할 수 있다면 jQuery정말 멋지게 정리할 수 있습니다)
checkboxes각 열에서 하나만 선택해야하는 경우을 사용하는 것이 radio-buttons좋습니다. 할 수 없으면 다음으로 변경하십시오.if ( no1 !=1 && no2 != 1 && no3 != 1 )
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다