单选按钮显示文字

Question

我想问....为什么我的下拉菜单不显示文字？ 我确保我的代码是正确的....但是我什么都不能显示文本.....我对此感到非常困惑...这是我的单选按钮图片：

这是我在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的新手.....

Answer 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(' - ')); }); });