同じスクリプトにチェックボックスとチェックボックスの両方の値を投稿することはできますか

Question

同じスクリプトでチェックボックスとチェックボックスの両方の値を取得します。私のスクリプトで使った方法は、これで私を手に入れません。送信ボタンを使わずに複数のチェックボックス値を取得したいチェックボックス値の両方のステータスを取得することは可能ですか？

$("input[type=checkbox]").on("change", function() { 
 
    var ids = []; 
 
    var dis = []; 
 
    $('input[type=checkbox]:checked').each(function() { 
 
    ids.push($(this).val()); 
 
    }); 
 
    $('input[type=checkbox]:unchecked').each(function() { 
 
    dis.push($(this).val()); 
 

 
    }); 
 
    //var allCheckboxes=$(".#form1").find(".check_list") 
 
    //var unchecked=allCheckboxes.not(":checked"); 
 
    dis = dis.toString(); 
 
    ids = ids.toString(); 
 
    $.ajax({ 
 
    url: "dummyeodcheckbox.php", 
 
    type: "POST", 
 
    async: true, 
 
    cache: false, 
 
    data: ({ 
 
     value: ids, 
 
     unchecked: dis 
 
    }), 
 
    dataType: "text", 
 
    success: function(data) { 
 
     alert("activitysubmitted"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="" name="form1" id="form1"> 
 
    <div align="center" id="container"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <p>S.NO</p> 
 
     </td> 
 
     <td> 
 
      <p>Check Box</p> 
 
     </td> 
 
     <td> 
 
      <p>Activity Name</p> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      1 
 
     </td> 
 
     <td> 
 
      <input type="checkbox" class="check_list" name="checklist[]" value="Bod1" id="b1" <?php echo $status ?> /> 
 
     </td> 
 
     <td> 
 
      <label for="Bod1">BOD1 </label> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      2 
 
     </td> 
 
     <td> 
 
      <input type="checkbox" class="check_list" name="checklist[]" value="Bod2" id="b2" <?php echo $status ?> /> 
 
     </td> 
 
     <td> 
 
      <label for="Bod2">BOD2 </label> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      3 
 
     </td> 
 
     <td> 
 
      <input type="checkbox" class="check_list" name="checklist[]" value="Bod3" id="b3" <?php echo $status ?> /> 
 
     </td> 
 
     <td> 
 
      <label for="Bod3">BOD3</label> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      4 
 
     </td> 
 
     <td> 
 
      <input type="checkbox" class="check_list" name="checklist[]" value="Bod4" id="b4" <?php echo $status ?> /> 
 
     </td> 
 
     <td> 
 
      <label for="Bod4">BOD4 </label> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</form>

Answer 1

問題は、jQueryのには:uncheckedセレクタが存在しないことです。私はまた、あなたがより簡潔構築配列を作るためにmap()を使うことをお勧めしたい

$('input[type=checkbox]:not(:checked)').each(function() { 
    dis.push($(this).val()); 
}); 

、ともjoin()代わりtoString()を使用しての配列を：代わりに、あなたはこのように、:not(:checked)を使用することができます。

$("input[type=checkbox]").on("change", function() { 
    var ids = $('input[type=checkbox]:checked').map(function() { 
    return this.value; 
    }).get(); 
    var dis = $('input[type=checkbox]:not(:checked)').map(function() { 
    return this.value; 
    }).get() 

    $.ajax({ 
    url: "dummyeodcheckbox.php", 
    type: "POST", 
    cache: false, 
    data: ({ 
     value: ids, 
     unchecked: dis, 
    }), 
    dataType: "text", 
    success: function(data) { 
     console.log("activitysubmitted"); 
    } 
    }); 
}); 

また、AJAXリクエストからXMLまたはJSONを返すことを検討する必要があります。 textは、空白の不一致によって簡単に壊れる可能性があります。

Answer 2

入力type="hidden"を使用して、チェックボックスの値を保存できます。