Question

我想在表格中使用单选按钮。我正在使用AngularJS来创建我的表单。但我想要图像而不是单选按钮。我可以通过添加css来隐藏单选按钮

position: absolute;
left: -9999px;

但问题是它禁用了已检查的事件。有没有办法使图像可点击。

这是我的代码：

＆＃13;

var app = angular.module("MyApp", []);

app.controller('MyCtrl', function($scope, $timeout) {         

  $scope.submitForm = function(isValid) {
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
      console.log(myform);
    }
  };
  $scope.sliderValue = null;
  $scope.name = '';    
  $scope.data = {
    singleSelect: null,
    multipleSelect: [],
    option1: 'option-1',
  };
  $scope.forceUnknownOption = function() {
    $scope.data.singleSelect = 'nonsense';
  };

});

＆＃13;

<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body ng-controller="MyCtrl">

    <form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">

      <div ng-show="step==1">
        <h3>Which step</h3>
        <div ng-form='step1form'>
          <input type="radio" name="step" ng-model="data.step" value="11" ng-disabled="!step1form.$valid" ng-click="step = 2">
          <img src="http://sstatic.net/stackoverflow/img/favicon.ico" style="width:50px" alt="Save icon"/>
          <p class="Text">
            Step 2
          </p>
        </div>
      </div>

      <div ng-show="step==2">
        <div ng-form='step2form'>
          <div ng-disabled="!step2form.$valid"><span>Finish</span></div>
        </div>
      </div>
    </form>

    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
    <script src="script.js"></script>
  </body>
</html>

＆＃13;

Answer 1

您需要将标签与收音机输入相关联，并将其与您的图像相关联。您可以在此演示中看到，当您设置标签样式时，它会代替输入

$(document).ready(function() {
  $('input').click(function() {
    alert($('input').val());
  });
});

label.radioLabel {
  background: pink;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  width: 50px;
}
input[type=radio] {
  position: absolute;
  top: 0;
  left: -9999px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>No label</h1>
<input type="radio" name="step">
<h1>Label Wrapped Around</h1>
<label class="radioLabel">
  <input type="radio" name="step">
</label>
<h1>Label With "For"</h1>
<input type="radio" id="step" name="step">
<label class="radioLabel" for="step"></label>

显然在标签上使用您自己的样式，但我建议您保留cursor:pointer;，这样您的用户就可以看到互动。

Answer 2

试试这个

    <label>
<input type="radio" name="step" ng-model="data.step" value="11" ng-disabled="!step1form.$valid" ng-click="step = 2">
<img src="http://sstatic.net/stackoverflow/img/favicon.ico" style="width:50px" alt="Save icon"/>
 </label>

的CSS：

label > input{ /* HIDE RADIO */
  display:none;
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}

https://jsbin.com/modotayufe/edit?html,css,js,output

Answer 3

诀窍是用标签包装输入，所以当你点击它时，就像你点击了单选按钮一样。在标签中添加span标记，以便将背景设置为图像。

在下面的代码段中，您可以看到这一点。（我评论了ng-change属性，因此您可以看到效果）

＆＃13;

var app = angular.module("MyApp", []);

app.controller('MyCtrl', function($scope, $timeout) {	       	

  $scope.submitForm = function(isValid) {
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
      console.log(myform);
    }
  };
  $scope.sliderValue = null;
  $scope.name = '';    
  $scope.data = {
    singleSelect: null,
    multipleSelect: [],
    option1: 'option-1',
  };
  $scope.forceUnknownOption = function() {
    $scope.data.singleSelect = 'nonsense';
  };

});

＆＃13;

input[type="radio"] {
  display:none;  
}

input[type="radio"] + span {
  content:"";
  background:url(http://i.stack.imgur.com/hlkG5.png);
  width:30px;
  height:30px;
  display:inline-block;
}

input[type="radio"]:checked + span {
  background-image:url(http://i.stack.imgur.com/TwN4q.png);  
}

＆＃13;

<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body ng-controller="MyCtrl">

    <form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">

      <div ng-show="step==1">
        <h3>Which step</h3>
        <div ng-form='step1form'>
          <label>
            <input type="radio" name="step" ng-model="data.step" value="11" ng-disabled="!step1form.$valid"><!--ng-click="step = 2"-->
            <span></span>
          </label>
          <img src="http://sstatic.net/stackoverflow/img/favicon.ico" style="width:50px" alt="Save icon"/>
          <p class="Text">
            Step 2
          </p>
        </div>
      </div>

      <div ng-show="step==2">
        <div ng-form='step2form'>
          <div ng-disabled="!step2form.$valid"><span>Finish</span></div>
        </div>
      </div>
    </form>

    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
    <script src="script.js"></script>
  </body>
</html>

＆＃13;

Answer 4

我使用了很棒的图标。你可以这样做：

<label class="hideRadio">
  <input class="" type="radio" value="" name="">
  <i class="fa fa-check-circle "></i>
</label>

并使用此css：

.hideRadio input {
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

图像作为单选按钮

4 个答案: