Изображение как радио-кнопка

Question

Изображение как радио-кнопка

0

Я хочу использовать переключатель в своей форме. Я использую AngularJS для создания моей формы. Но я хочу изображение вместо переключателя. Я могу скрыть переключатель, добавив css

position: absolute;
left: -9999px;

Но проблема заключается в отключении проверенного события. Есть ли способ сделать изображение кликабельным.

Вот мой код:

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';
  };

});

<!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>

user5397448 28 март 2016, в 15:44

Источник

2

оберните его в элемент label и просто добавьте классы со спрайтами изображений.
Jai 28 март 2016, в 13:22

Теги:

javascript

html

angularjs

css

4 ответа

1

Хитрость заключается в том, чтобы обернуть ввод ярлыком, поэтому, когда вы нажимаете на него, вы, как вы нажимали на переключатель. В ярлыке поместите тег span чтобы вы могли установить его фон на свое изображение.

В приведенном ниже фрагменте вы можете увидеть это в действии. (Я прокомментировал атрибут ng-change чтобы вы могли видеть эффект)

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';
  };

});

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);  
}

<!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>

Mosh Feu 28 март 2016, в 12:20

0

Вы пробовали любой из ответов?
Mosh Feu 28 март 2016, в 15:56
0

Спасибо за вашу помощь.
user5397448 29 март 2016, в 05:53
0

Добро пожаловать. На самом деле я не понимаю, как принятый ответ помогает вам. Это не ведет себя как радио-кнопка. Разве нет?
Mosh Feu 29 март 2016, в 07:06
0

на самом деле я хотел скрыть символ переключателя и сделать его кликабельным при нажатии на изображение.
user5397448 29 март 2016, в 09:20
0

Так что вам определенно не нужен переключатель, вам нужна простая кнопка.
Mosh Feu 29 март 2016, в 10:09
0

да, но я хотел бы получить данные формы, где каждый вопрос имеет более одного варианта. поэтому я использовал радио кнопку
user5397448 29 март 2016, в 11:57

Показать ещё 4 комментария

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; поэтому взаимодействие очевидно для ваших пользователей.

Angelique 28 март 2016, в 12:07

0

Спасибо за помощь
user5397448 29 март 2016, в 05:56

1

попробуй это

    <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

B.P 28 март 2016, в 12:06

0

спасибо, это работает
user5397448 29 март 2016, в 05:54

Ещё вопросы

оберните его в элемент label и просто добавьте классы со спрайтами изображений.
Добро пожаловать. На самом деле я не понимаю, как принятый ответ помогает вам. Это не ведет себя как радио-кнопка. Разве нет?
на самом деле я хотел скрыть символ переключателя и сделать его кликабельным при нажатии на изображение.
Так что вам определенно не нужен переключатель, вам нужна простая кнопка.
да, но я хотел бы получить данные формы, где каждый вопрос имеет более одного варианта. поэтому я использовал радио кнопку

Sladjan Marjanovic · Accepted Answer · 2016-03-28T11-36-00.000Z

Я использовал удивительные значки. Вы можете сделать это следующим образом:

<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 */
}