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

参见下面的解释示例。

// Set click handler based on data-toggle value
$('[data-toggle="wizard-checkbox"]').click(function(e) {
  // Ensure that click target is a checkbox
  if ($(e.target).is(":checkbox")) {
    // Uncheck all checkboxes, remove active class
    $(this).find('input[type="checkbox"]').prop('checked', false).removeClass("active");

    // Check clicked box, add active class
    $(e.target).prop('checked', true).addClass("active");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

虽然这有效，但为什么不使用单选按钮，因为它们被设计用于？ 以这种方式运行的复选框肯定会让您的用户感到困惑。

Answer 2

首先，我会做明显的事情并强烈建议你使用这种模式：

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

话虽如此，这里是如何让一组复选框表现得像一个广播组：

当在chx（即复选框）上触发更改事件时，在默认状态中设置 ALL chx：< / p>
- 在此演示中

<input type="checkbox" id="1" 类 name="sectiun"value="1" 禁用= false 检查= false ＆gt;`

确保只有一个chx具有一组属性，属性和/或类，用于定义活动，选择，检查，打开等状态。
- 在此演示中

<input type="checkbox" id="1"的类=＆＃34;有源＆＃34; name="sectiuni"value="1"的停用的检查 >

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

单选按钮行为：

点击 =＆gt;选择广播通过具有共同[name]属性值关联的所有其他单选按钮现在 un - :checked。

[演示：所有chx均为默认值：checked=false，disabled=false，.active类已删除] < / LI>

再次点击 =＆gt;收音机保持不变，其:checked状态仍然存在。

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

点击另一个 =＆gt;活动收音机进入默认状态，泡沫，冲洗，重复....

演示

＆＃13;
＆＃13;
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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'); });
＆＃13;
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 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; }
＆＃13;
<fieldset class="choice" id="sectiuni" title="Sections">  <input type="checkbox" id="1" name="sectiuni" value="1"> <label for='1'>    I    </label> <input type="checkbox" id="2" name="sectiuni" value="2"> <label for='2'>   II   </label> <input type="checkbox" id="3" name="sectiuni" value="3"> <label for='3'>  III </label> </fieldset> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

复选框就像单选按钮jquery一样

2 个答案:

演示