如何使2个复选框充当一组复选框中的单选按钮

时间:2020-11-02 13:14:26

标签: javascript checkboxlist radio-group

我想在两个复选框中使两个复选框充当单选按钮 正如我们在选择Front或Pocket时所做的那样,它只检查其中的一个。

$(document).ready(function() {
  $.ajax({
    url: 'allPrintLocations',
    type: 'get',
    success: function(response) {

      $('.printLocation_name label').click(function(event) {

        var checkNow = $(this).parent('.printLocation_name').find('input')
        if (checkNow.attr('checked')) {
          for (var i = 0, l = response.length; i < l; i++) {
            if (checkNow.val() == response[i].id) {
              checkNow.removeAttr('checked', 'checked')
              document.getElementById("testview" + i).style.display = "none";
              document.getElementById("numSelect" + i).style.display = "none";
            }
          }
        } else {
          for (var i = 0, l = response.length; i < l; i++) {
            document.getElementById("discribee" + i).name = response[i].name + "Suggestion";
            document.getElementById("Numbere" + i).name = response[i].name + "Colors";
            if (checkNow.val() == response[i].id) {
              checkNow.attr('checked', 'checked')
              document.getElementById("testview" + i).style.display = "block";

              document.getElementById("numSelect" + i).style.display = "block";
              document.getElementById("label" + i).innerHTML = 'Describe what you would like designed on the ' + response[i].name + ' of the shirt.';
            }
          }
        }

      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Select_Boxes">
  <div class="all_print_location">
    <label class="main_labels">
                                    Select printed location
                                </label>
    <div class="allLocations">
      @foreach ($product[0]->print_locations as $PL)

      <div class="printLocation_name">
        <input name="printLocations[]" type="checkbox" id="front" value="{{$PL->id}}">

        <label for="front">{{$PL->name}}</label>
      </div>
      @endforeach
    </div>
  </div>
</div>
<div class="PageInfo">
  <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, recusandae.</em></p>
</div>
@for($i=0;$i
<count($printLocations);$i++) <div id="testview{{$i}}" class="DiscribePrint" style="display: none">
  <label id="label{{$i}}" for="discribe" class="main_labels">
                                What You want on your Front
                            </label>
  <div class="main__discribe">
    <textarea id="discribee{{$i}}" name="" cols="20" rows="5" class="form-control form_class" placeholder="1. Please add notes/changes you need a numbered list.&#10;2. Please try to keep your notes concise.&#10;3. Please make sure to write the exact text you want on the shirt (event     name, date, venue, letters, school, chapter, sponors,etc"></textarea>
  </div>
  </div>
  <div id="numSelect{{$i}}" class="number_Colors" style="display: none">
    <label for="Numbers" class="main_labels">
                                No. of colors
                            </label>
    <select id="Numbere{{$i}}" name="SelectColors" class="form-control form_class">
      <option value=""> Select Colors</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>

  @endfor

https://greekhouse.org/wizard/design

这是我的HTML代码 这是我的控制器功能

 public function designDetailScreen(Request $request)
    {
        $printLocations = PrintLocations::all();
        $designID = $request->cookie('designID');
        $design = Designs::where('id',$designID)->get();
        $productID = $request->cookie('productID');
        $product = Products::where('id',$productID)->get();
        // dd($product[0]->print_locations);
        $data = array(
            "design" =>$design,
            "product" =>$product,
            "printLocations" => $printLocations
        );
        return view('web.designDetailScreen')->with($data);
    }

0 个答案:

没有答案
相关问题