チェックボックス入力をキャプチャする方法

私はウェブ開発を学んでおり、私は1つの問題にぶつかってきました。フォームに4つのチェックボックスがあり、チェックボックスの状態をキャプチャする必要があります。また、チェックされたチェックボックスidをRESTサービスに送信する必要があります。ここで、チェックされたチェックボックスごとに異なる操作を実行する必要があります。チェックボックス入力をキャプチャする方法

以下は私が今まで行ってきたものです。私は上記のやっていること

<!DOCTYPE html> 
<html> 
<body> 
<form> 
<input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1">Graph1<br> 
<input type="checkbox" class = "checkBoxProp" id = "2" name="checkBoxProp" value="2">Graph2<br> 
<input type="checkbox" class = "checkBoxProp" id = "3" name="checkBoxProp" value="3">Graph3<br> 
<input type="checkbox" class = "checkBoxProp" id = "4" name="checkBoxProp" value="4">Graph4<br> 
<input id="btnGetResponse" type="button" value="ClickMe!"/> 
</form> 
<div> </div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$("#btnGetResponse").click(function() 
{ 
var ids = []; // empty array 
$('.checkBoxProp:checked').each(function() { 
    ids.push($(this).val()); // returning the value of the current element of all the elements selected 
}); 
console.log(JSON.stringify(ids.join())); 
$.ajax({ 
    type: "POST", 
    url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes", 
    data: JSON.stringify(ids.join()) , 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(response) 
    { 
     sessionStorage.setItem(1, response); 
     window.location.href = "../backbonetest/dashboardUI.html"; 
    }, 
    failure: function(response) 
    { 
     alert('fail'); 
    } 
    }); 
})

まず、すべての確認のチェックボックスを選択し、配列にそれらをプッシュして、完全な文字列に変換するjoin()を使用して、JSONして送信にそれを変換しています。

たとえば、最初と3番目のチェックボックスをオンにした場合、送信される値はの"1,3"のRest Serviceになります。チェックボックスのデータは文字列形式で送信されているので、RESTサービスではこの文字列を解析/分割してから(,)を実行して必要な処理を実行する必要があります。 RESTですべて私は何かをしたいです

if (firstcheckbox selected) // do something 
if(secondcheckbox selected)// do something

質問：私は事を複雑にしていません。すべてのチェックボックスを配列に入れる必要がありますか？はいの場合でもjoin()を使用して文字列化して残りのサービスに送信する必要があります。チェックしたすべてのチェックボックスIDを取得するために、RESTサービスで送信された文字列を解析/分割する必要がない方法を見つけることはできますか？私はこのすべてに新しいです。私を案内してください。あなたはcontentType"application/json; charset=utf-8"として、stringifyする必要はありませんコンテンツを定義しているとcheckedチェックボックスを取得する

出典

2016-06-27 Unbreakable

使用jQueryObject.mapは
値。
そのサーバが使用してデータにアクセスできるように、私は2つのチェックボックスを選択した場合はログ `「2,4」`として私に出力を与えるkey

$("#btnGetResponse").click(function() { 
 
    var ids = $('.checkBoxProp:checked').map(function() { 
 
    return this.value; 
 
    }).get(); 
 
    console.log(JSON.stringify(ids.join())); 
 
    $.ajax({ 
 
    type: "POST", 
 
    url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes", 
 
    data: { 
 
     ids: ids 
 
    }, 
 
    contentType: "application/json; charset=utf-8", 
 
    dataType: "json", 
 
    success: function(response) { 
 
     sessionStorage.setItem(1, response); 
 
     window.location.href = "../backbonetest/dashboardUI.html"; 
 
    }, 
 
    failure: function(response) { 
 
     alert('fail'); 
 
    } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form> 
 
    <input type="checkbox" class="checkBoxProp" id="1" name="checkBoxProp" value="1">Graph1 
 
    <br> 
 
    <input type="checkbox" class="checkBoxProp" id="2" name="checkBoxProp" value="2">Graph2 
 
    <br> 
 
    <input type="checkbox" class="checkBoxProp" id="3" name="checkBoxProp" value="3">Graph3 
 
    <br> 
 
    <input type="checkbox" class="checkBoxProp" id="4" name="checkBoxProp" value="4">Graph4 
 
    <br> 
 
    <input id="btnGetResponse" type="button" value="ClickMe!" /> 
 
</form>

出典

2016-06-27 17:08:01 Rayon

を指定keydataのオブジェクトを持っています。したがって、ここでは2と4の値の鍵は何ですか。私は初心者です。 – Unbreakable

@ Unbreakable - データオブジェクト '{ ids：ids } 'では、idsが鍵です。 – Rayon

最後の疑問が1つあります。これをRESTで捕捉する方法。マップのデータ型は何か。それは地図ですか？ – Unbreakable

チェックボックス入力をキャプチャする方法

答えて

関連する問題