单选按钮显示文本答案

【问题标题】：Radio button show text单选按钮显示文本
【发布时间】：2017-08-31 03:39:30
【问题描述】：

我想问....为什么我的下拉菜单不能显示文字？我确保我的代码是正确的......但我不能显示任何文字......我真的很困惑...... 这是我的单选按钮图片：

这里是我在 view.php 中的 html 代码 .........

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="dropdown dropdown-full-width dropdown-category">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >
      <span class="name">
          <span id="category-select">- -
              @foreach($categoriesid as $kategori)
                {{ $kategori->name}} -
              @endforeach

          -</span>
      </span>
      <span class="caret"></span>
  </button>
  <div class="dropdown-menu row">
    <div class="col-md-4">
      <li><strong>By {{ $category[1] }}</strong></li>
      @foreach($category1 as $occasions)
      @php
        $checked = false;

        foreach ($categoriesid as $d) {

          if($d->id ==  $occasions->id) $checked=true;

        }
      @endphp
      <li>
        <div class="checkbox">
          @if($checked)
          <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions->id }}" checked="checked"> {{ $occasions->name }}</label>
          @else
            <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions->id }}"> {{ $occasions->name }}</label>
          @endif
        </div>
      </li>
      @endforeach
    </div>

    <div class="col-md-4">
      <li><strong>By {{ $category[2] }}</strong></li>
      @foreach($category2 as $types)
      @php
        $checked = false;

        foreach ($categoriesid as $d) {

          if($d->id ==  $types->id) $checked=true;

        }
      @endphp
      <li>
        <div class="checkbox">
          @if($checked)
          <label><input type="radio" name="category['types']" class="category-radio" value="{{ $types->id }}" checked="checked"> {{ $types->name }}</label>
          @else
            <label><input type="radio" name="category['types']" class="category-radio" value="{{ $types->id }}"> {{ $types->name }}</label>
          @endif
        </div>
      </li>
      @endforeach
    </div>

    <div class="col-md-4">
      <li><strong>By {{ $category[3] }}</strong></li>
      @foreach($category3 as $flowers)
      @php
        $checked = false;

        foreach ($categoriesid as $d) {

          if($d->id ==  $flowers->id) $checked=true;

        }
      @endphp
      <li>
        <div class="checkbox">
          @if($checked)
          <label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers->id }}" checked="checked"> {{ $flowers->name }}</label>
          @else
            <label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers->id }}"> {{ $flowers->name }}</label>
          @endif
        </div>
      </li>
      @endforeach
    </div>
</div>
</div>

这里是我的 javascript 代码.......

 $(function(){
    $('input[type="radio"]').click(function(){
        var $radio = $(this);
        var name = $(this).prop("name");

        // if else for checked true and false
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#category-select').text('');
        }
        else{
            $radio.data('waschecked', true);
            $(`input[name=${name}]:not(:checked)`).data('waschecked', false);
            $('#category-select').text(txt).trim();
        }

        let output = [];
        var txt;
        $('input[type="radio"]:checked').each( function() {
            txt = $(this).parent().text().trim();
            output.push(txt);
        });
        $('#category-select').text(output.join(' - '));
    });
});

请帮助我了解这个 javascript...因为我是 javascript 的新手.....

【问题讨论】：

你能发布渲染的 HTML 吗？从浏览器检查 HTML 代码是什么？
@FaizFurios52 你的ul 在哪里？你刚从div 开始，类名为dropdown，然后是li，你缺少ul。
尝试在浏览器控制台中检查$(this).parent().text().trim(); 的值以查找选定的单选按钮。

标签： javascript php jquery html laravel-5.3

【解决方案1】：

我得到了答案....

$('.dropdown-menu').on('click', function(e) {
    e.stopPropagation();
  });

  $(function(){
    var $radio = $(this);
    if($('input[type="radio"]:checked').data('waschecked', true))
      {
        $radio.data('waschecked', true);
      }
    $('input[type="radio"]').click(function(){
        var $radio = $(this);
        var name = $(this).prop("name");

        // if else for checked true and false
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#category-select').text('');
        }
        else{ 
            $radio.data('waschecked', true);
            $('input[type="radio"]:not(:checked)').data('waschecked', false);
            $('#category-select').text(txt);
        }
        
        let output = [];
        var txt;
        $('input[type="radio"]:checked').each( function() {
            txt = $(this).parent().text();
            output.push(txt);
        });
        $('#category-select').text(output.join(' - '));
    });
});

【讨论】：