javascript - 输入收音机收音机时如何隐藏div答案

【问题标题】：How to hide a div when input radio radio selected javascript angularjsjavascript - 输入收音机收音机时如何隐藏div
【发布时间】：2015-04-04 13:51:05
【问题描述】：

我想在选择单选按钮时隐藏 div。

    <div class="col-md-3">
     <input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
     <input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
     <div class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
    </div>
<div class="col-md-3">
 <button class="btn btn-default" ng-click="getReservationDetails('lg', packageSlot)"> Book Now </button>    
</div>

在我的代码中，如果选择了单选按钮，我希望隐藏 div class= product-noselected-message。

这是我目前在我的 javascript 上的内容

$scope.getReservationDetails = function(size, packageSlot) {
      var service_option;
      if($('input[name=service_option]:checked')) {

        service_option = $('input[name=service_option]:checked').val();
      }

      if (service_option!= null) {
        $rootScope.date = new Date();
        console.log($rootScope.date);
        $rootScope.singlePackageSlot = packageSlot;
        $rootScope.locationName = $scope.cleaningServiceLocation.name;

        modalInstance = $modal.open({
          templateUrl: 'views/cleaning_services/register_event.html',
          controller: 'CleaningServicesCancelCtrl',
          size: size
        });
      }
      else {
        $('.product-noselected-message').html('Please select an option');
      }
    $('#service_option').on('checked', function() {
          $('.product-noselected-message').addClass('hidden');
        });

但它不起作用我该怎么办？

http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq

【问题讨论】：

添加了 bootstrap 作为标签，因为 Kingsley Simon 不想添加它，但预计其中一位回答者会猜到。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

只是将class="hidden" 添加到 HTML 元素并没有任何作用，您需要将其与一些 CSS 类似

.hidden
{
    display: none; /* This will act like the element doesn't exist */
}

或

.hidden
{
    visibility: hidden; /* The element will be 100% transparent, but still take up space */
}

取决于您的具体目标。

【讨论】：

当你在你的主要 html 作品中有 twitter bootstrap.css 时添加隐藏。抱歉，你的答案是 100% 错误的。
@KingsleySimon，请问您在哪里指定使用 bootstrap.css？很抱歉，但您的傲慢和不合理的评论使我帮助您的动力减少到 0。鉴于可用信息，请投票支持准确的答案。
@LajosArpad 非常感谢您的评论。但它已添加到我的其他页面中。我不认为我必须在这里添加我的整个代码。好吧，如果它降低了你的动力，那很好，也许其他人会觉得有动力帮助我。欢呼
非常简单：您可以在此处添加标签。你应该对那些试图帮助你的人好一点。出于善意，他们免费为您工作。当他们提出问题时（例如，通过添加引导标签）和在 cmets 中的尊重（如果您指出不准确的地方，您也可以以文明、不傲慢的方式进行），他们应该得到尊重。
对@siguza 表示歉意和歉意。谢谢 Lajos Arpad。

【解决方案2】：

在 div 上添加 NG-IF，并检查“service_option”是否为空
在'product-noselected-message' div上添加ng-if="!service_option" ，你不需要css类来隐藏和显示angularJS中的div，使用NG-IF或NG-SHOW或NG-HIDE

<div class="col-md-3">
 <input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
 <input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
<div ng-if="!service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
</div>

【讨论】：

我已经编辑了我的输入代码。我不希望 div 在初始加载时可见。如果单击按钮并且没有选择的单选按钮，则只会变得可见，但选择单选按钮时，它会隐藏div span>
@KingsleySimon 快速 n 肮脏的方式在范围上添加 isFormSubmitted 标志并将 ng-if 条件更改为 ng-if="isFormSubmitted && !service_option "

【解决方案3】：

就像 BeingDev 所说，ng-if/ng-show/ng-hide 是有角度的做事方式..

下面是一个 plunker 链接，您可以在其中检查输出

http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq?p=preview

 <div ng-hide="service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

【讨论】：

不否认 BeingDev 选项有效，但我不希望 div 在初始加载时可见。它只有在单击按钮时才可见
显示“请选择一个选项”的触发器是一个按钮，因此它不会在初始加载时显示。它仅在单击按钮且未选择单选按钮时显示。但是在选择任何单选按钮时，如果它是可见的，它会隐藏 div
这里我们添加了一个监视事件来隐藏点击电台plnkr.co/edit/GVYuI47TKlAVqkVDUDOq?p=preview时的可见消息

【解决方案4】：

这里有很多方法，根据你的完整代码有更好的方法，但我会按照你的要求去做，完全正确。

这是 ng-class 的工作，如果条件被评估为 true，它将分配一个类名：

  <div ng-class="{'hidden' : service_option != '' && other_option }" ...

你需要知道的是，如果右边的条件评估为真，上面单引号中的类名将被分配给 div（或任何元素）。在这种情况下，在 radios 中选择的值将阻止 service_option 为空字符串。当然，可以是您可能需要的任何东西。

var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope) {
  $scope.service_option = "";

})

.hidden {display:none;}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp">
    <div class="col-md-3" ng-controller="mycontroller">
      <input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option" />
Adhoc
          <br />
      <input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option" />
Weekly
      <div ng-class="{'hidden' : service_option != '' }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

  <p>Value Selected : {{service_option}}</p>
  </div>
  </body>

</html>

编辑根据您在下面的最新评论，您需要在评估两件事后分配一个班级。所以：

  <div ng-class="{'hidden' : service_option != '' || other_option }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

这样就可以了。这是一个 plunker 链接，以免与上面的代码混淆：

http://plnkr.co/edit/pYpKwagYmYTxURM1aJft?p=preview

【讨论】：

显示“请选择一个选项”的触发器是一个按钮，因此它不会在初始加载时显示。它仅在单击按钮且未选择单选按钮时显示。但是在选择任何单选按钮时，如果它是可见的，它会隐藏 div