发表新帖
发表新帖

How to retrieve checkboxes values in jQuery

前端 未结
关注
15 2023
时光说笑
时光说笑 2020-11-22 10:11

How to use jQuery to get the checked checkboxes values, and put it into a textarea immediately?

Just like this code:


  
  &l
相关标签:
15条回答
  • 滥情空心
    2020-11-22 10:45

    You can also return all selected checkboxes value in comma separated string. This will also make it easier for you when you send it as a parameter to SQL

    Here is a sample that return all selected checkboxes values that have the name "chkboxName" in comma separate string

    And here is the javascript

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

    Here is the HTML sample

    <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>
    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 10:47

    Thanks altCognito, your solution helped. We can also do this by using name of the checkboxes:

    function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});
    0 讨论(0)
  • 刺人心
    2020-11-22 10:52

    The following may be useful since I got here looking for a slightly different solution. My script needed to automatically loop through input elements and had to return their values (for jQuery.post() function), the problem was with checkboxes returning their values regardless of checked status. This was my solution:

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

    Usage:

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

    If the given input field is a checkbox, the input_val function only returns a value if its checked. For all other elements, the value is returned regardless of checked status.

    0 讨论(0)
  • 借酒劲吻你
    2020-11-22 10:53

    Your question is quite vague but I think this is what you need:

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

    Edit: Oh, okay.. there you go... You didn't have the HTML up before. Anyways, yeah, I thought you meant to put the value in a textarea when it gets clicked. If you want the checked checkboxes' values to be put into the textarea (maybe with a nice comma-seperation) on page load it would be as simple as:

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

    Edit 2 As people have done, you can also do this to shortcut the lengthy selector I wrote:

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

    ... I totally forgot about that shortcut. ;)

    0 讨论(0)
  • 遇见更好的自我
    2020-11-22 10:53

    If you want to insert the value of any checkbox immediately as it is being checked then this should work for you:

    $(":checkbox").click(function(){
  $("#id").text(this.value)
})
    0 讨论(0)
  • 名媛妹妹
    2020-11-22 10:54

    Here's an alternative in case you need to save the value to a variable:

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

    (map() returns an array, which I find handier than the text in textarea).

    0 讨论(0)
 看不清?
提交回复
热议问题