Question

我想从Bootstrap中使用它，但是使用我的Laravel Collective功能时，选项状态按钮将不会更改为正确的状态。所以我想用jQuery自己更改它。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

（来自getbootstrap.com的原始HTML）

我重写为：

<div id ="addproductsort" class="btn-group btn-group-toggle" data-toggle="buttons">
  <label id="productsort" class="btn btn-secondary active">
    {{Form::radio('options', 'one', false, ['name' => 'options', 'autocomplete' => 'off', 'class' => 'productsortoption'])}}
            one
  </label>
  <label id="productsort" class="btn btn-secondary">
    {{Form::radio('options', 'two', false, ['name' => 'options', 'id' => 'option2', 'autocomplete' => 'off', 'class' => 'productsortoption'])}}
            two
  </label>
  <label id="productsort" class="btn btn-secondary">
    {{Form::radio('options', 'three', false, ['name' => 'options', 'id' => 'option2', 'autocomplete' => 'off', 'class' => 'productsortoption'])}}
            three
  </label>
</div>

这是我得到的脚本：

$('#productsort').each(function() {  
  $(this).on('click', function() {  
    if($(this).hasClass('active')) {
      $(this).children().attr( "checked", "checked" );
    };
  });
});

当我单击第一个按钮one时，选项child的状态会改变，但是当我单击第二个或第三个按钮时，什么也没有发生。

这是怎么了？预先感谢。

Answer 1

我认为您正在寻找类似以下示例的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="btn-group" role="group" aria-label="Basic example">
  <label class="btn btn-secondary">
    <input type="radio" name="radio" />
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="radio" />
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="radio" />
  </label>
</div>

在此示例中，我创建了3个单选按钮，并用3个标签包裹了它们。

因为3个单选按钮具有相同的名称（radio），所以我们不需要使用jquery来捕获 onclick 事件。

注意：id属性必须包含唯一值。您不能创建具有相同ID值的多个元素。在这种情况下，您可以改用class。当您要删除某些具有特定ID的元素时，这很有用。

也许我看错了，因为我的理解是应该将“ onclick”选项状态设置为“ checked”，但是当我在“ getbootstrap”上查看原始HTML时，checked状态没有改变，仅在第一个选项上设置为“选中”

那是因为这一行：

<label id="productsort" class="btn btn-secondary active">
    ...
</label>

第一个ID为productsort的标签的类别为active。第二个标签和第三个标签没有。

如果要使用jquery，可以尝试：

$('.productsort').on('click', function() {  
    // using "find" method to find an element that has class "active" from "addproductsort"
    // then, using "removeClass" method to remove the class "active" on the element
    $('#addproductsort').find('.active').removeClass('active');

    // all of the 3 labels don't have class "active" here
    // you can stop the code from here to check html code

    // we add class "active" to this label/element because it was clicked
    $(this).addClass('active').children().attr("checked", "checked");

    // or
    // $(this).addClass('active').children().prop("checked", true);
});

注意：：在此示例中，我将id="productsort"更改为class="productsort"。

Answer 2

这是最终的解决方案，我补充说

$('.productsortoption').removeAttr('checked');

在“ .productsort”不处于活动状态时删除“已检查”状态。

$('.productsort').on('click', function() {  
     $('#addproductsort').find('.active').removeClass('active');
     $('.productsortoption').removeAttr('checked');
     $(this).addClass('active').children().attr("checked", "checked");
});

HTML

<div id ="addproductsort" class="w-100 btn-group btn-group-toggle" data-toggle="buttons">
    <label class="productsort">
        <input name="options" autocomplete="off" class="productsortoption" type="radio" value="Sale">
        one
    </label>
    <label class="productsort">
        <input name="options" id="option2" autocomplete="off" class="productsortoption" type="radio" value="two">
        two
    </label>
    <label class="productsort">
        <input name="options" id="option2" autocomplete="off" class="productsortoption" type="radio" value="three">
        three
    </label>
  </div>

如何更改子属性jQuery

2 个答案: