Проверка переключателя проверяется с помощью jQuery - PullRequest
4 голосов
/ 23 сентября 2010

В моей форме есть набор переключателей. Вот наценка:

<div class="optionHolder">
    <p class="optionName">Format</p>
    <div class="option checked">
        <input type="radio" name="fileType" value="avi" />
        <img src="images/avi.png" alt="" />
        <label>AVI</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mov" />
        <img src="images/mov.png" alt="" />
        <label>MOV</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mp4" />
        <img src="images/mp4.png" alt="" />
        <label>MP4</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mp3" />
        <img src="images/mp3.png" alt="" />
        <label>MP3</label>
        </div>
</div>

Когда форма отправлена, я хочу проверить, что один из них отмечен. Какой лучший способ пойти по этому поводу? Я думал о том, чтобы перебрать их все и сделать флаг, чтобы установить, если один из них отмечен, а затем проверить флаг после цикла и, если он ложный, выдать ошибку.

Любая помощь приветствуется, ура.

Ответы [ 7 ]

20 голосов
/ 23 сентября 2010

Вы можете использовать length и равный селектор атрибута с :checked селектором фильтра, как это:

if ($("input[name='fileType']:checked").length > 0){
  // one ore more checkboxes are checked
}
else{
 // no checkboxes are checked
}
5 голосов
/ 23 сентября 2010

демо

http://jsfiddle.net/Vq2jB/2/

var isChecked = jQuery("input[name=fileType]:checked").val();
4 голосов
/ 23 сентября 2010

Попробуйте подключаемый модуль jQuery Validation .Это может многое сделать для вас и быть действительно полезным для множества различных форм.Если вы хотите сделать это очень просто:

if($("input[name=fileType]:checked").length > 0) {
   //Is Valid
}
2 голосов
/ 11 сентября 2013

Действительно старый, я знаю.Если выбор радио не выбран, он возвращается как «неопределенный», а не «0».В моем примере я объявляю переменную со значением переключателей.Если указанное значение не определено, JavaScript возвращает false.

gender = $('input[name=gender]:checked').val();

if(typeof gender === 'undefined'){
    alert('Do not move on');
    $('input[name=gender]').css('box-shadow', '0 0 2px 0 red');
    return false;
}    
2 голосов
/ 23 сентября 2010

Попробуйте:

var checkbox = $("input[@name='fileType']:checked");

if( checkbox.length > 0 ) {
    alert( checkbox.val() ); // checkbox value
} else {
    alert('Please select a format'); // error
}

http://jsfiddle.net/wE4RD/

1 голос
/ 23 сентября 2010

Я думаю, $('input[name=fileType]:checked').length справится.

0 голосов
/ 23 сентября 2010

Вы можете проверить, возвращает ли проверенное имя переключателя значение в jQuery:

if($("input[@name='fileType']:checked").val() != null){
    // button checked
}
...