Як отримати значення прапорців у jQuery

240

Як використовувати jQuery для отримання значень прапорець і негайно поставити їх у текстову область?

Так само, як і цей код:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Якщо id="c_d"оновлення Ajax оновлено , наведений нижче код altCognito не працює. Чи є хороше рішення?

jquery html checkbox

— lanqy
джерело

ти хотів усіх або одного за одним?

— TStamper

Як ми можемо "встановити" прапорець із заданим значенням / міткою? сказати "one_name2"?

— Амітд

5

@Amitd використовувати $ ("input [name = one_name2]"). Attr ("перевірено", правда);

— Марк Шультейс

спасибі, що працював добре .. навіть для типу радіо. 1 голос вгору :)

— Амітд

320

Ось який працює ( див. Приклад ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Оновлення

Через деяку кількість місяців було задано ще одне питання щодо того, як зберегти вищезазначене, якщо ідентифікатор зміниться. Ну, рішення зводиться до відображення функції updateTextArea в щось загальне, що використовує CSS-класи, і використовувати функцію "живий" для моніторингу DOM за тими змінами.

— cgp
джерело

2

А-а-а! Відмінно. Ви взяли до уваги обидва ймовірні сценарії. Гарна робота, сер. ;)

— KyleFarris

Як ми можемо "встановити" прапорець із заданим значенням / міткою? сказати "one_name2"?

— Амітд

6

Мені подобається використовувати карту для таких предметів: $ (': перевірено', '#c_b'). Map (функція (i, cb) {return cb.value}) .get (). Крім того, це лише особисті переваги, але я б розділив отримання значень від зміни текстових областей, наприклад: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val ($ (': перевірено', '#c_b'). map (функція (i, cb) {return cb.value}) .get ())); $ ('# c_b input: first'). тригерHandler (' натисніть ');});

— Брендон

використовувати $(document).on("click", "#c_b input", updateTextArea);замість цього, щоб подолати проблеми з ajax'y.

— Goldentoa11

1

не впевнений, що це лише в IE (11), але чи не слід це робити $('#c_b:checked')(наголос на відстані)?

— AceMark

124

Ви також можете повернути всі вибрані значення прапорців у розділеній комою рядку. Це також полегшить вас, коли ви надішлете його як параметр до SQL

Ось зразок, який повертає всі вибрані значення прапорців, які мають ім'я "chkboxName" у окремому рядку з комами

А ось і javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Ось зразок HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

— Мохамед ЕльШейх
джерело

Я просто натрапив на це, шукаючи спосіб отримати всі значення відмічених прапорців заданого імені, і це працює для мене з двома невеликими питаннями. 1) щоразу, коли я перевіряю прапорець, відмінний від першого, він перемикає прапорець у першому. 2) Коли я намагаюся встановити це на масив, щоб я згодом отримав доступ до інформації, він виходить з ладу.

— Преосвященні Бульбашки

3

Це, чесно кажучи, найкраща відповідь. Дуже просто. Я б зняв "функцію" і "попередження", оскільки це бентежить деяких людей, але код простий, молодець.

— tmarois

showSelectedValues також працює для розшифровки груп радіо кнопок, які мають те саме ім’я

— Matthew Lock

65

Ваше запитання досить розпливчасте, але я думаю, що це те, що вам потрібно:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Редагувати: О, гаразд ... там ви йдете ... Ви раніше не мали HTML. У будь-якому випадку, так, я думав, що ти мав намір поставити значення в текстовій області, коли вона натискається. Якщо ви хочете, щоб значення встановлених прапорців були розміщені в текстовій області (можливо, з приємним відокремленням від коми) на завантаженні сторінки, це було б так просто:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Редагувати 2 Як це зробили люди, ви також можете зробити це, щоб скоротити довгий селектор, про який я писав:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Я зовсім забув про цю комбінацію. ;)

— КайлФарріс
джерело

50

Це прекрасно працює для мене:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Дякую Мохамеду ЕльШейху

— Nic
джерело

1

класна людина ... це єдиний, хто працював на мою петлю ajax;) дякую

— Пробачте SEO

7

також може $ ('input [ім'я = вибір]: перевірено'). map (function () {return this.value;}). toArray ()

— ygaradon

8

Спасибі altCognito, ваше рішення допомогло. Ми також можемо це зробити за допомогою імені прапорців:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

— Harpreet Bhatia
джерело

6

Наступне може бути корисним, оскільки я прийшов сюди шукати дещо інше рішення. Мій сценарій потребував автоматичного перегляду циклів введення елементів і повинен був повернути їх значення (для функції jQuery.post ()), проблема полягала в тому, що прапорці повертають свої значення незалежно від статусу перевіреного. Це було моє рішення:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Використання:

jQuery(".element").input_val();

Якщо задане поле введення є прапором, функція input_val повертає значення лише у тому випадку, якщо його встановлено. Для всіх інших елементів значення повертається незалежно від перевіреного стану.

— Енді
джерело

це справді прекрасно, дякую велике ... Я просто змінив "return jQuery (this) .val ();" щоб "повернути правду;" тому що в моєму випадку це прапорець, я просто повинен знати, перевіряється він чи ні .. дякую!

— TCB13

5

Ось альтернатива, якщо вам потрібно зберегти значення до змінної:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () повертає масив, який я вважаю зручнішим, ніж текст у textarea).

— pgcd
джерело

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

У вас це надто складно. Крім того, ви зазвичай не встановлюєте значення текстової області параметром значення - значення текстового поля - це внутрішній HTML. І якщо ви мали б встановити значення якогось елемента, зазвичай краще використовувати метод 'val ()' для цілей абстрагування браузера.

— KyleFarris

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

— сатору
джерело

2

$("#t").text($("#cb").find(":checked").val())

— мкоряк
джерело

1

Можна одночасно встановити декілька прапорців.

— KyleFarris

2

У будь-якому випадку вам, мабуть, потрібно щось подібне:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Це отримає значення першого встановленого прапорця на сторінці та вставте це у текстовій області з id='textarea' .

Зауважте, що у вашому прикладі коду слід поставити прапорці у формі.

— Пім Джагер
джерело

2

Це неправильно, isповертає булеве значення, булеве значення не має valметоду.

— визначено

2

Набагато простіший і коротший спосіб, який я використовую, щоб виконати те саме, використовуючи відповідь з іншого допису, такий:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Спочатку міста витягуються з бази даних MySQL і переносяться в PHP під час циклу:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Тепер, використовуючи вищевказаний код jQuery, я отримую всі значення city_id і повертаюсь назад до бази даних за допомогою $ .get (...)

Це зробило моє життя таким простим, оскільки зараз код є повністю динамічним. Для того, щоб додати більше міст, все, що мені потрібно зробити, - це додати більше міст у свою базу даних, і жодних побоювань щодо кінця PHP чи jQuery.

— Зеешан
джерело

0

У мене була подібна проблема, і ось як я вирішив її, використовуючи наведені вище приклади:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

— Сем
джерело

0

Спробуйте це ..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

— соніда
джерело

0

Якщо ви хочете вставити значення будь-якого прапорця негайно під час його перевірки, це повинно працювати для вас:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

— duckyflip
джерело

Не враховується декілька значень та зніміть прапорці

— Роб