Убедитесь, что установлен хотя бы один флажок

18

У меня есть форма с несколькими флажками, и я хочу использовать JavaScript, чтобы удостовериться, что проверено хотя бы одно. Это то, что у меня есть сейчас, но независимо от того, что выбрано, появляется предупреждение.

  

JS (неверно)

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

HTML

<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();">
  

Итак, что я закончил в 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")
 }

}

Я решил отказаться от части «Спасибо», чтобы вписаться в остальную часть задания. Большое вам спасибо, каждый совет действительно помог.     

задан MegaSly 03.08.2012 в 02:24
источник
  • Почему кнопка «Редактировать и Сообщить» находится вне формы? –  Šime Vidas 03.08.2012 в 02:43

7 ответов

23

Вам следует избегать использования двух флажков с тем же именем, если вы планируете ссылаться на них как document.FC.c1 . Если у вас есть несколько флажков с именем c1 , как браузер узнает, к чему вы обращаетесь?

Вот решение, отличное от jQuery, для проверки того, отмечены ли флажки на странице.

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

Вам нужна часть Array.prototype.slice.call , чтобы преобразовать NodeList , возвращенный document.querySelectorAll , в массив, который вы можете назвать some on.

    
ответ дан mash 03.08.2012 в 02:40
источник
  • Спасибо, я искал, чтобы избежать JQuery, но ваше второе предложение помогло совсем немного. –  MegaSly 03.08.2012 в 05:43
  • @Mash У вас никогда не должно быть двух элементов с одинаковыми именами WHAT ????? Тогда как вы пишете радио? –  Mageek 09.08.2012 в 06:27
  • «Вы должны избегать наличия двух элементов с тем же именем» - «Неверно». Использование повторяющихся имен элементов является допустимым, работает во всех браузерах и отлично работает на стороне сервера после отправки формы. Как сказал Магек, так вы создаете радиогруппы, но это верно и для других элементов формы. –  nnnnnn 10.05.2016 в 14:55
  • @nnnnnn Я обновил этот 4-летний ответ, так как в нем содержится некоторая дезинформация, также обновленная с более современным решением. Пожалуйста, дайте мне знать, если он все еще содержит дезинформацию, или если есть какие-либо другие улучшения, которые вы видите, что им нужно. Благодаря! –  mash 03.06.2016 в 03:29
  • , если вы не используете имя - как иначе вы будете создавать только определенные группы флажков? –  TV-C-15 21.10.2017 в 22:09
20

Это должно работать:

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 для повышения производительности. См. Ссылка     

ответ дан Mageek 03.08.2012 в 02:48
источник
  • Спасибо. Я искал, как проверить флажки, и это сработало для меня –  user1815823 06.04.2013 в 16:24
  • Я был вынужден с этой проблемой, но ваш код решил мою проблему +1 –  offboard 05.10.2013 в 21:12
  • Один разрыв после «okay = true» будет немного оптимизирован: P –  pesho hristov 03.06.2015 в 11:41
  • @peshohristov Правда! Я не знаю, как я забыл это сделать. –  Mageek 05.06.2015 в 22:44
2

Проверьте это.

Вы не можете получить доступ к входам форм через их имя. Вместо этого используйте document.getElements .

    
ответ дан Temp 03.08.2012 в 03:19
источник
1

Вы можете проверить, что по крайней мере один флажок установлен или нет, используя этот простой код. Вы также можете отказаться от своего сообщения.

Ссылка Ссылка

<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>
    
ответ дан Parth Patel 20.01.2018 в 13:16
источник
1

Используя 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>
    
ответ дан crashtestxxx 10.07.2015 в 23:27
источник
1

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


Объяснение:
После попытки отправки формы будет обновлен ярлык раздела флажка, чтобы уведомить пользователя, чтобы он установил флажок, если он еще не появился. Если флажок не установлен, появляется скрытая метка «ошибка», предлагающая пользователю «Пожалуйста, установите флажок!». Если пользователь проверяет хотя бы один флажок, красная метка мгновенно скрывается снова, открывая оригинальную метку. Если пользователь снова отменяет все флажки, красная метка возвращается в режиме реального времени. Это стало возможным благодаря событию onchange JavaScript (написанному как .addEventListener('change', function(){});

    
ответ дан Kyle Vassella 25.02.2017 в 07:35
источник
0
< 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 >
    
ответ дан saira 10.01.2016 в 15:25
источник