チェックしたすべてのチェックボックスIDをRESTに渡す方法

私はウェブ開発を学んでいます。私はいくつかのchecboxesを作成しました。現在私は4つのチェックボックスを持っています。ユーザーがチェックしたすべてのチェックボックスIDを「RESTサービス」に送信します。以下は私が試みたものです。チェックしたすべてのチェックボックスIDをRESTに渡す方法

<!DOCTYPE html> 
<html> 
<body> 
<form> 
<input type="checkbox" id = "1" name="graphId" value="1">Graph1<br> 
<input type="checkbox" id = "2" name="graphId" value="2">Graph2<br> 
<input type="checkbox" id = "3" name="graphId" value="3">Graph3<br> 
<input type="checkbox" id = "4" name="graphId" value="4">Graph4<br> 
<input id="btnGetResponse" type="button" value="ClickMe!"/> 
</form> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
<input id="btnGetResponse" type="button" value="Redirect" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
    $("#btnGetResponse").click(function() 
    { 
     $.ajax(
     { 
      type: "GET", 
      // HARD CODED graphId=1 in the URL, I need it to be the checkboxId which are checked 
      url: "http://localhost:51349/SMS_Rest.svc/v1/CheckBox?graphId=1", 
      data: '{}', // Need to get the checked checkboxes ID here 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (response) 
      { 
       if (response == true) 
       { 
       sessionStorage.setItem('uiResponse', true); 
       window.location.href = "../backbonetest/dashboardUI.html"; 
       } 
      }, 
      failure: function (response) 
      { 
       alert(response); 
      } 
     }); 
    }); 
}); 

</script> 
</body> 
</html>

親切に私を助けてください。

出典

2016-06-23 Unbreakable

jQuery.map()を:checkedセレクタより上に使用してください。

はdataオブジェクトでmappedのIDを渡します。

$("#btnGetResponse").click(function() { 
 
    var ids = $('[name="graphId"]:checked').map(function() { 
 
    return this.id; 
 
    }).get(); 
 
    console.log(ids); 
 
    $.ajax({ 
 
    type: "GET", 
 
    url: "http://localhost:51349/SMS_Rest.svc/v1/CheckBox", 
 
    data: { 
 
     checked: ids 
 
    }, 
 
    contentType: "application/json; charset=utf-8", 
 
    dataType: "json", 
 
    success: function(response) { 
 
     if (response == true) { 
 
     sessionStorage.setItem('uiResponse', true); 
 
     window.location.href = "../backbonetest/dashboardUI.html"; 
 
     } 
 
    }, 
 
    failure: function(response) { 
 
     alert(response); 
 
    } 
 
    }); 
 
});

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

出典

2016-06-23 15:42:12 Rayon

私はOP "にチェックされている... ..." *を言及したことを忘れてしまいました*。また、何らかの理由で、あなたのコードをフィドルに入れようとすると、うまくいきません。 – wmash

@Rayon：私はこのすべてに新しいので、あなたのコードを自分のコードに組み込むのに時間がかかります。私は今それを試し、それがうまくいくかどうか分かります。ありがとうございました – Unbreakable

@Rayon、私はそれが動作することを知っていますが、なぜ 'this'だけではなく、' $（this） 'だけを使用していますか？私は、すべてのjQuery要素を参照するには後者が必要だと思っていましたが、私はそのようにしてもうまくいきません... – wmash

チェックしたすべてのチェックボックスIDをRESTに渡す方法

答えて

関連する問題