复选框就像单选按钮 jquery

Question

我有这个 jquery，我希望我的复选框像单选按钮一样，我怎样才能做到这一点？

jQuery 脚本：

$('[data-toggle="wizard-checkbox"]').click(function(){
        if( $(this).hasClass('active')){
            $(this).removeClass('active');
            $(this).find('[type="checkbox"]').removeAttr('checked');
        } else {
            $(this).addClass('active');
            $(this).find('[type="checkbox"]').attr('checked','true');
        }
    });

HTML：

<div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Sections">
    <input type="checkbox" id="1" name="sectiuni" value="1">
    <input type="checkbox" id="2" name="sectiuni" value="2">
    <input type="checkbox" id="3" name="sectiuni" value="3">
</div>

更新：

我有图像而不是框，因此建议的答案不适用于我当前的代码。下面列出了完整的html代码

下面是完整的 HTML

<div class="tab-pane" id="sectiune">
                            <h4 class="info-text">Va rugam sa alegeti sectiunea pentru momentul dvs.</h4>
                            <div class="row">
                                <div class="form-group">
                                <div class="col-sm-12 col-sm-offset" >
                                    <div class="col-sm-3 col-sm-offset">
                                        <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Solo">
                                            <input type="checkbox" id="solo" name="sectiuni" value="Solo">
                                            <div class="icon">
                                                <img src="assets/img/icons/solo.svg"/>
                                            </div>
                                            <h6>Solo</h6>
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-sm-offset">
                                        <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Duo/Trio/Quartet">
                                            <input type="checkbox" id="duo" name="sectiuni" value="Duo/Trio/Quartet">
                                            <div class="icon">
                                                <img style="width: 48px;" src="assets/img/icons/duotrio.svg"/>
                                            </div>
                                            <h6>Duo/Trio/Quartet</h6>
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-sm-offset">
                                        <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Grupuri 5-12 dansatori">
                                            <input type="checkbox" id="grupuri" name="sectiuni" value="Grupuri">
                                            <div class="icon">
                                                <img style="width: 48px;" src="assets/img/icons/grupuri.png"/>
                                            </div>
                                            <h6>Grupuri</h6>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Formaţii peste 13 dansatori.">
                                            <input type="checkbox" id="formatii" name="sectiuni" value="Formatii">
                                            <div class="icon">
                                                <img style="width: 48px;" src="assets/img/icons/formatii.png"/>
                                            </div>
                                            <h6>Formatii</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

更新成功：

我已经成功了！ 请看下面的代码：

$('[data-toggle="wizard-checkbox"]').click(function(){
         wizard = $(this).closest('.wizard-card');
         wizard.find('[data-toggle="wizard-checkbox"]').removeClass('active');
                $(wizard).find('[type="checkbox"]').removeAttr('checked');

        $(this).find('[type="checkbox"]').prop('checked','true');
        $(this).addClass('active');

    });

Answer 1

首先，我会做显而易见的事情，并强烈建议您使用这种模式：

<input type='radio' name='Same_NAME_as_Sibling_RADs'>

话虽如此，下面是如何让一组复选框像一个广播组一样工作：

1. 当在 chx（即复选框）上触发更改事件时，将 ALL chx 设置为 default 状态：

   • 在此演示中：

<input type="checkbox" id="1"classname="sectiun"value="1"disabled=false checked=false>`

1. 确保只有一个 chx 具有一组属性、属性和/或类，这些属性、属性和/或类定义了活动、选择、检查、开启等状态。

   • 在这个演示中：

<input type="checkbox" id="1"class="active"name="sectiuni"value="1"disabled<strong>checked</strong>>

1. 在:checked chx 上设置.active 类是合乎逻辑的，但是disabled=true 是什么？这是为了模拟单选按钮无法直接切换到交替状态的行为：

   • 单选按钮行为：

     1. Click => 选中单选按钮 所有其他通过具有通用 [name] 属性值关联的单选按钮现在是 un-:checked。

        • [在演示中： 所有 chx 都默认为：checked=false、disabled=false 和 .active 类已删除 ]

     2. 再次单击 => Radio 保持不变，:checked 状态保持不变。

        • [在演示中：活动 chx 实际上是禁用，因此它的行为与处于活动状态的单选按钮完全相同。

     3. 单击另一个 => 活动收音机进入默认状态，起泡、冲洗、重复......

演示

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
On any checkbox having a change event it will...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$(':checkbox').on('change', function() {

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ...set all checkboxes as unchecked and ENABLED and remove .active
  At this point nothing is active or selected...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $(':checkbox').prop({
    'checked': false,
    'disabled': false
  }).removeClass('active');

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ...Next check the checkbox that was selected at the origin of 
  the change event (clicked element), disable the checkbox from 
  being manually unchecked, and add .active class.
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $(this).prop({
    'checked': true,
    'disabled': true
  }).addClass('active');

});

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
This still exixts just not in the DOM. Its influence derives from
the :checked pseudeo-class and its association with a <label>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

[type=checkbox] {
  display: none
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Each one is associated with an input using pseudo-class :checked. 
A click on the label is the same as clicking the checkbox 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

label {
  padding: 21px 15px 0;
  display: inline-block;
  cursor: pointer;
  margin: 10px;
  font: 600 24px/1.2 Conaolas;
  width: 48px;
  height: 48px;
  vertical-align: bottom;
  outline: .5px inset rgba(0, 0, 0, 0.2);
}

.active:checked+label {
  background: rgba(72, 0, 0, 0.7);
  color: gold;
}

<fieldset class="choice" id="sectiuni" title="Sections">

  <!--========================================================
  The <label>'s [for=] attribute associates it with an <input>
  by setting the [for="ID_of_INPUT"] to an #ID of an <input>
  =========================================================-->
  <input type="checkbox" id="1" name="sectiuni" value="1">
  <label for='1'>&#8239;&#8239;&#8239;&#8239;I&nbsp;&nbsp;&nbsp;&#8239;</label>

  <input type="checkbox" id="2" name="sectiuni" value="2">
  <label for='2'>&#8239;&nbsp;&nbsp;II&nbsp;&nbsp;&#8239;</label>

  <input type="checkbox" id="3" name="sectiuni" value="3">
  <label for='3'>&#8239;&nbsp;III&nbsp;</label>

</fieldset>




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