时间戳

首页 > 解决方案 > Jquery一次只选择一个表行的单选输入并用复选标记替换

javascript - Jquery一次只选择一个表行的单选输入并用复选标记替换

问题描述

嗨，我只是想弄清楚桌子上的 laravel foreach 循环。我想在选择的无线电输入更改为复选标记和背景颜色为绿色时。如果选择其他无线电输入，则旧输入未选中并选中复选标记。对于每个无线电输入，它将像这样继续。

<table class="table">
  @foreach ($iterable as $key)
  <tr>
    <td>$key['name']</td>
    <td>
      <input id="id$key['id']" type="radio" name="inputs" value="val$key['id']">
      <label for="id$key['id']">Select</label>
    </td>
  </tr>
  @endforeach
</table>

我用按钮更改了单选按钮视图。

.table input[type="radio"] {
    /* display: block; */
    /* position: absolute; */
    opacity: 0.01;
    z-index: 100;
  }

  .dable label {
    padding: 5px;
    border: 1px solid #CCC;
    cursor: pointer;
    z-index: 90;
  }

  .table label:hover {
    background: #DDD;
  }

我在下面有它，但缺少一些东西。那么如何用jquery做到这一点呢？

    $(function(){
  $(".table input[type='radio']").on("change", function(){
    var isChecked = $(this).is(':checked').length;
    var label = $("label[for='" + $(this).attr('id') + "']");
    $(this).each(function(index) {
      if(isChecked < 1){
        $(label).html("<span>Select</span>").css('background', 'white');
      }else{
        $(label).html("<i class='glyphicon glyphicon-ok'></i>").css('background', 'green');
      }
    });
  });
});

标签： javascriptjqueryfor-loop

解决方案

.length从var isChecked = $(this).is(':checked').length; 那个给你的东西中删除undefined，如果你离开它，它会给你true并让 你成为你的if条件。

innnerHTML您在使用 更改标签时犯了错误icon，因为您将无法将其重新设置。

而是将其设置为display none，并将图标附加到最接近的td。

脚本现在在点击时做了 4 件事：

  1. 全部显示labels（为了显示以前删除的）
  2. 全部删除icons（为了删除以前的附加）
  3. 在最接近td的通缉处添加图标label
  4. 隐藏通缉犯label

你不能用elsein 作为条件，if因为点击收音机总是会产生true，所以你else永远不会开火。

$(function(){
  $(".table input[type='radio']").on("change", function(){
    var isChecked = $(this).is(':checked');
    var label = $("label[for='" + $(this).attr('id') + "']");
    $(this).each(function(index) {
      if(isChecked === true){ 
      $("label").css('display', '');
      //show all labels
      
      $(".icon").remove();
      //remove all icons
      
      $(label).closest( "td" ).append( '<span class="icon">icon</span>');
      // add icon on clicked label closest <td>
      
       $(label).css('display', 'none');  
       // hide clicked label on clicked label
      }
    });
  });
});
.table input[type="radio"] {
    /* display: block; */
    /* position: absolute; */
    opacity: 1.01;
    z-index: 100;
  }

  .table label {
    padding: 5px;
    border: 1px solid #CCC;
    cursor: pointer;
    z-index: 90;
  }

  .table label:hover {
    background: #DDD;
  }
.icon{
background-color: green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
 
  <tr>
    <td>$key 1</td>
    <td>
      <input id="1" type="radio" name="inputs" value="1">
      <label for="1">Select 1</label>
    </td>
    </tr>
    <tr>
    <td>$key 2</td>
    <td>
      <input id="2" type="radio" name="inputs" value="2">
      <label for="2">Select 2</label>
    </td>
    </tr>
    <tr>
    <td>$key 3</td>
    <td>
      <input id="3" type="radio" name="inputs" value="3">
      <label for="3">Select 3</label>
    </td>
  </tr>
</table>

您也可以删除label variable并使用this 它只会对单击的元素做出反应，然后您会找到$(this).siblings( "label" )或$(this).closest( "td" )使用它做一些事情。

$(function(){
      $(".table input[type='radio']").on("change", function(){
        var isChecked = $(this).is(':checked');
        
        //var label = $("label[for='" + $(this).attr('id') + "']");
        
        $(this).each(function(index) {
          if(isChecked === true){ 
          $("label").css('display', '');
          //show all labels
          
          $(".icon").remove();
          //remove all icons
          
          $(this).closest( "td" ).append( '<span class="icon">icon</span>');
          // add icon on clicked label closest <td>
          
           $(this).siblings( "label" ).css('display', 'none');  
           // hide clicked label on clicked label
          }
        });
      });
    });

推荐阅读