Получить значение флажка?

177

Итак, у меня есть код, который выглядит так:

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

Мне просто нужен Javascript, чтобы получить значение любого флажка, установленного в данный момент.

РЕДАКТИРОВАТЬ : Чтобы добавить, будет только один флажок.

Мэтью «обязательный» Брайант
источник
1
Вам нужен код JavaScript или JQuery?
Андрей Воробьев
6
Почему бы не использовать радио-кнопку?
PraveenVenu
Потому что я пишу плагин для сайта
Мэтью «обязательно» Брайант
Если вам нужен только один флажок, почему вы не используете радио-кнопки? это более подходящий компонент пользовательского интерфейса для этой работы.
Тал Ярон
@TalYaron Можете ли вы отменить выбор радио-кнопок? Я думаю, что не без кода JS. Возможно, ОП хотят отменить выбор поля легко.
R3tep

Ответы:

256

Для современных браузеров :

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

ИспользуяjQuery :

var checkedValue = $('.messageCheckbox:checked').val();

Чистый JavaScript безjQuery :

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}
инженер
источник
9
@Mageek - это плохая практика - добавлять один и тот же идентификатор на несколько элементов.
инженер
@Engineer Нет, просто установите разные идентификаторы для каждого флажка.
Mageek
3
@Engineer "Сохранение байтов", потому что мы должны просто писать document.getElementById("foo").value();и "сохранять вычисления", потому что getElementById, безусловно, быстрее, чем getElementsByTagNameи цикл.
Mageek
9
для jQuery .is(":checked")это правильный путь, так как .val()он вернет значение атрибута, если оно определено .. и даже если оно не определено, он вернет "on", а не логическое значение .. jsfiddle.net/d5f7wnzu
Питер
1
document.querySelector('.messageCheckbox:checked').valueгенерирует TypeError, если флажок не установлен
Meisner
262

Ничто из вышеперечисленного не сработало для меня, но просто используйте это:

document.querySelector('.messageCheckbox').checked;

Удачного кодирования.

JanBorup
источник
Я согласен. Вы подтвердили то, что я думал. Мне нравится помещать var chk1 = document.getElementById ('messageCheckbox'); Таким образом, я могу ссылаться на свойства переменной "chk1": проверено, включено, стиль и т. Д.
JustJohn
4
Где ты это взял id? Не могли бы вы объяснить? Парень, который задал вопрос, использовался classна самом деле. Было бы хорошо, если бы вы могли предоставить полный код, чтобы я мог понять, откуда вы взялиid
devfaysal
3
Это не может работать с примером кода, предоставленным OP ... Мне любопытно, почему он получил так много голосов, не отвечая на вопрос, хотя быстрое исправление может сделать это правильно.
Лоран С.
1
Можете ли вы отредактировать предложенный ответ, чтобы подробнее рассказать о том, что он делает и как он обращается к ОП?
Ро Йо Ми
2
@PradeepKumarPrabaharan, вероятно, люди, подобные мне (не использующие идентификатор для нескольких элементов), задаются вопросом, почему .value давал им неопределенный статус.
111

Я использую это в моем коде. Попробуйте это

var x=$("#checkbox").is(":checked");

Если флажок установлен, xбудет истинным, в противном случае он будет ложным.

user1683014
источник
7
Это не отвечает на вопрос, но может использоваться, чтобы определить, установлен ли флажок. +1, так как это все еще помогло мне.
Кевин Юрковски,
5
Не отвечает на вопрос, но это именно то, что я искал.
НЗП
Полезно, когда #checkboxпеременная, например myCheckbox.
Optimae
15

в простом JavaScript:

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}
function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}
Stano
источник
4

$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
 	  });
       
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">

Маринья до Насименту
источник
4

Это не дает прямого ответа на вопрос, но может помочь будущим посетителям.


Если вы хотите, чтобы переменная всегда была текущим состоянием флажка (вместо того, чтобы постоянно проверять ее состояние), вы можете изменить onchangeсобытие, чтобы установить эту переменную.

Это можно сделать в HTML:

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

или с помощью JavaScript:

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})
Джо Иддон
источник
2

Использовать это:

alert($(".messageCheckbox").is(":checked").val())

Предполагается, что флажки для проверки имеют класс «messageCheckbox», в противном случае вам нужно будет выполнить проверку, если вход имеет тип флажка, и т. Д.

jackJoe
источник
2
<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">
function getValue(value){
    alert(value);
}
Инопланетянин
источник
0

Если вы используете Semantic UI React , dataв качестве второго параметра передается onChangeсобытие.

Таким образом , вы можете получить доступ к checkedсобственности следующим образом :

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />
Дэйв Кларк
источник
0

Ничто из вышеперечисленного не работало для меня, не выдавая ошибки в консоли, когда флажок не был установлен, поэтому я вместо этого сделал что-то подобное (onclick и функция checkbox используются только для демонстрационных целей, в моем случае это часть гораздо большая функция отправки формы):

function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}
<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

пряность
источник
-3

В моем проекте я обычно использую следующие фрагменты:

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

И это хорошо работает. С наилучшими пожеланиями.

VanThaoNguyen
источник
Крайне неэффективный способ сделать это.
17