Question

我想显示我的复选框，如下所示： Displayed checkboxes

如果未选中复选框，则应显示“+”，而选中时应显示“ - ”。

我现在有以下代码：

$xml = new SimpleXMLElement($response);

我不知道如何更改它，因为现在我有这个： Displayed checkboxes

任何人都可以帮助我吗？

Answer 1

试试这个

https://plnkr.co/edit/vYNhJI7yvlxKSBYWE13y?p=preview

  <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<style>
  .question input[type='checkbox'] + label:after {
    content:"-";
}
.question input[type='checkbox']:checked + label:after {
    content:"+";
}
.question input[type='checkbox'] {
    display:none;
}
label {
    cursor:pointer;
}
</style>

</head>
<body ng-app="checkboxExample">
  <script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form name="myform" ng-controller="ExampleController">
  <ul>
    <li class="question">
        <input type="checkbox" name="question" id="question1" />
        <label for="question1">Questions</label>
    </li>
    <li class="question">
        <input type="checkbox" name="question" id="question2" />
        <label for="question2">Questions</label>
    </li>
</ul>
 </form>
</body>
</html>

Answer 2

有可能。完全有效的例子：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .hidden {
            display: none;
        }

        #mycheckbox + #mycheckboxlabel {
            background-image: url("https://image.freepik.com/free-icon/minus-sign_318-59392.jpg");
            width: 16px;
            height: 16px;
            display: inline-block;
            background-size: cover;
        }
        #mycheckbox:checked + #mycheckboxlabel {
            background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/heavy-plus-sign.png");
        }
    </style>
</head>
<body>
<input id="mycheckbox" type="checkbox" class="hidden">
<label for="mycheckbox" id="mycheckboxlabel"></label>
</body>

</html>

由于您有更多这些内容，因此在我的示例中，您可以使用class代替checkbox和标签，而不是id。

AngularJS：显示图像而不是复选框

2 个答案: