时间戳

首页 > 解决方案 > 单击一个复选框后，所有复选框都被选中

javascript - 单击一个复选框后，所有复选框都被选中

问题描述

我正在使用 html pdo 制作一个表单，并且有 angular js 用于验证，但是单击一个框后我需要复选框的部分，其余复选框也是 getteng check

我的表格

<input type="checkbox" name="declaration" id="declaration" ng-model="formData.decl"  /> 1 data<br/>
     
<input type="checkbox" name="declaration" id="declaration" ng-model="formData.decl" /> 2 data<br/>

这是insert.php

///////////////////////
if(empty($form_data->decl))
{
 $error[] = 'Choosing declaration is required';
}
else
{
 $declaration = $form_data->decl;
}

$data = array(
 ':declaration' => $declaration
);

if(empty($error))
{
 $query = "
 INSERT INTO tbl 
 (declaration) VALUES 
 (:declaration)
 ";
 $stmt = $db->prepare($query);
 if($stmt->execute($data))
 {
  $message = 'Data Added';
 }
}
else
{
 $validation_error = implode(", ", $error);
}

$output = array(
 'error'  => $validation_error,
 'message' => $message
);

echo json_encode($output);

这是完整的角度js

var app = angular.module('dynamicApp', []);
app.controller('dynamicController', function($scope, $http){

 $scope.success = false;
 $scope.error = false;
 
 $scope.rows = [{name: 'travel_details[]', name: 'remove'}];
 $scope.addRow = function(){
  var id = $scope.rows.length + 1;
  $scope.rows.push({'id':'dynamic'+id});
 };

 $scope.removeRow = function(row){
  var index = $scope.rows.indexOf(row);
  $scope.rows.splice(index, 1);
 };

 $scope.formData = {};

 $scope.submitForm = function(){
  $http({
   method:"POST",
   url:"insert.php",
   data:$scope.formData
  }).success(function(data){
   if(data.error != '')
   {
    $scope.success = false;
    $scope.error = true;
    $scope.errorMessage = data.error;
   }
   else
   {
    $scope.success = true;
    $scope.error = false;
    $scope.successMessage = data.message;
    $scope.formData = {};
    $scope.rows = [{holder_name: 'travel_details[]', holder_name: 'remove'}];
    $scope.fetchData();
   }
  });
 };

});

我看到复选框区域中的部分 ng-model="formData.decl" 导致了这个问题。如果我删除它，那么只会单击单个复选框，但表单验证将不起作用。

有人可以帮我解决这个问题吗？

非常感谢

标签： javascriptphphtmlangularjs

解决方案

两个复选框都被选中，因为它们绑定到同一个模型：

<input type="checkbox" name="declaration" id="declaration" ng-model="formData.decl"  /> 1 data<br/>
     
<input type="checkbox" name="declaration" id="declaration" ng-model="formData.decl" /> 2 data<br/>

您必须将每个输入绑定到专用模型字段：

<input type="checkbox" name="declaration1" id="declaration1" ng-model="formData.decl_1"  /> 1 data<br/>
     
<input type="checkbox" name="declaration2" id="declaration2" ng-model="formData.decl_2" /> 2 data<br/>

请注意每个输入绑定到的属性（formData.decl_1、formData.decl_2）。此外，我认为将相同的 ID 分配给 DOM 上的两个元素是不符合 W3C 的。

推荐阅读