web-dev-qa-db-ja.com

jQueryを使用してチェックされたすべてのチェックボックスの値を取得する方法

チェックボックスの選択した値を渡す方法がわかりません。どんな助けや提案も私にとって大きな助けになるでしょう。

今のところここに私のコードがあります私はチェックボックスの値を渡すことに固執しています

index.php

<table>
<?php
foreach($response as $item){
    echo '<tr><td><input type="checkbox" value="' .$item['id']. '"></td><td>' . $item['name'] . '</td></tr>';
}
?>
</table>
<button type="button" class="btnadd">AddSelected</button>
<script type="text/javascript">
    $(function() {
        $('.btnadd').click(function() {
            $.ajax({
                url: 'process.php',
                type: 'post',
                data: {  }, // what should I put here to pass the value of checked checkboxes
                success: function(data) {}
            });
        });
    });
</script>

process.php

<?php
$array_ids = $_POST['ids']; // this will retrieve the id's
?>
phpjqueryajaxcheckbox
8
GrayFullBuster

これを試して。

HTMLコード

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $('.btnadd').click(function(){
            var checkValues = $('input[name=checkboxlist]:checked').map(function()
            {
                return $(this).val();
            }).get();

            $.ajax({
                url: 'loadmore.php',
                type: 'post',
                data: { ids: checkValues },
                success:function(data){

                }
            });
        });
    });

</script>

<input type="checkbox" name="checkboxlist" value="1" checked="checked" />
<input type="checkbox" name="checkboxlist" value="2" checked="checked" />
<input type="checkbox" name="checkboxlist" value="4" />
<input type="checkbox" name="checkboxlist" value="5" checked="checked" />
<input type="checkbox" name="checkboxlist" value="6" />​

loadmore.phpコード

<?php

    print_r($_POST['ids']);

?>

loadmore.phpの出力

Array
(
    [0] => 1
    [1] => 2
    [2] => 5
)

それでおしまい。

乾杯。

20
Dipesh Parmar

この関数を使用します：

 function checkboxValues() {         
     var allVals = [];
     $(':checkbox').each(function() {
       allVals.Push($(this).val());
     });
     return allVals; // process the array as you wish in the function so it returns what you need serverside
  }

そして、あなたのajax呼び出しは次のようになります：

$.ajax({
    url: 'process.php',
    type: 'post',
    data: { checkboxValues() }, 
    success:function(data){         }
5
Udan

Ajax呼び出しの前に、次のようなものを使用できます。

var ids=[]; 
$('input[type=checkbox]:checked').each(function(){
    ids.Push($(this).val());
});

ただし、チェックボックスをいくつかのdivでラップし、jqueryセレクターで表すことを強くお勧めします。現在の方法では、ページ上の他のチェックボックスを選択してサーバーに送信できるためです。

3
Karim

チェックボックスを_<form>_タグでラップし、PHP配列表記：

_<form id="form1">
<input type="checkbox" name="item[]" value="1">
<input type="checkbox" name="item[]" value="2">
<input type="checkbox" name="item[]" value="3">
</form>
_

使用 jQuery.serialize() ：

_ $(function () {
     $('.btnadd').click(function () {
         $.ajax({
             url: 'process.php',
             type: 'post',
             data: $("#form1").serialize(),
             success: function (data) {}
         });
     });
 });
_

サーバー側では、_$_POST["item"]_はチェックされた値のみを含む配列になります。

3
Salman A

このhtmlのように試してください：

<td><?php echo "<input type='checkbox' name='chkimportsikep' class='form-control' value={$TABLE_NAME} checked>" ?></td>

ajax/jquery：

$(document).ready(function(){
//handle test button click
$("button#importSikep").click(function(){
    var checkValues = $('input[name=chkimportsikep]:checked').map(function()
    {
        return $(this).val();
    }).get();

    alert(checkValues);
    $('#loading-indicator-runsikep').show();
    $.ajax({
        type:"POST",
        url:"runsikepimport.php", // your php page action
        data:{ chkimportsikep: checkValues }, // 
        cache:false,
        success: function(result){
            $('#loading-indicator-runsikep').hide();
            alert(result);
            $('.modal.in').modal('hide');
            $("#description-status-sikep").load(location.href + " #description-status-sikep");  
            //location.reload(true);
        }
    });
    return false;
});

}）;

PHPアクション：

    // don't need array variable, but your using $_POST
if(!empty($_POST['chkimportsikep'])) {
            foreach($_POST['chkimportsikep'] as $table_name) {
             // do something 
            }
}
0
Heriyadi Setiana

チェックボックスリストのラベルテキストを取得する

<span> 
    <input type="checkbox" name="mycheckbox[id][]" value="0" /> 
    <label for="mycheckboxid_0">Test0</label> 
    <input type="checkbox" name="mycheckbox[id][]" value="1" /> 
    <label for="mycheckboxid_1">Test1</label> 
</span>


var chkbox = document.getElementsByName('mycheckbox[id][]');
    var vals = "";
    for (var i=0, n=chkbox .length;i<n;i++) {
        if (chkbox [i].checked) 
        {
            var label = "mycheckboxid_"+i;
            vals += " "+$('label[for="'+label+'"]').html();
        }
    }
alert(vals); // output test1 test2

それがあなたのために働くことを願っています

0
Kailas