javascript - 复选框切换选项

Question

我想我可能想多了我的问题。

我有 3 个使用 bootstrap-toggle CSS 的复选框。我有 3 个复选框，但是 我的情况是这样的:

如果“蓝色”和“黄色”被选中，那么“绿色”将被选中，其他 2 个将被取消选中。只要“绿色”被选中，“蓝色”和“黄色”就不能被选中。如果选中“绿色”，则无需禁用它们。 我想使用 javascript 文件，除非这可以使用 Jquery 以更少的代码完成。对任何一个开放。

更新:我提供了 HTML 的速记版本，它可能会影响“切换”的处理方式。请参阅下面编辑的 HTML。在这种情况下，我发现 div 的类 "toggle btn btn-default" 需要从 "toggle btn btn-success off 切换"

代码片段已编辑

<div class="form-group">
   <label for="blue">Blue
   <div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
       <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
           <div class="toggle-group">
                <label class="btn btn-default toggle-on">No</label>
                <label class="btn btn-success active toggle-off">Yes</label>
           <span class="toggle-handle btn btn-default"></span>
           </div>
        </div>
    </label>
</div>
<div class="form-group">
   <label for="yellow">Yellow
   <div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
       <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
           <div class="toggle-group">
                <label class="btn btn-default toggle-on">No</label>
                <label class="btn btn-success active toggle-off">Yes</label>
           <span class="toggle-handle btn btn-default"></span>
           </div>
        </div>
    </label>
</div>
<div class="form-group">
   <label for="green">Green
   <div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
       <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
           <div class="toggle-group">
                <label class="btn btn-default toggle-on">No</label>
                <label class="btn btn-success active toggle-off">Yes</label>
           <span class="toggle-handle btn btn-default"></span>
           </div>
        </div>
    </label>
</div>

我喜欢 Mohit 提供的脚本。但是，由于更改不是通过更改输入类型进行的，因此脚本必须改为更改 div 类。感谢您的帮助!

<script> 
    $(document).ready(function () {
    $("input[type='checkbox']").change(function (event) {
        if(!$("input[type='checkbox'][name='blue']").is('checked') && !$("input[type='checkbox'][name='yellow']").is('checked'))
          {
            $("input[type='checkbox'][name='green']").prop('checked', true);
            $("input[type='checkbox'][name='blue']").prop('checked', false);
            $("input[type='checkbox'][name='yellow']").prop('checked', false);

          }
          else if(!$("input[type='checkbox'][name='green']").is('checked'))
          {
            $("input[type='checkbox'][name='blue']").prop('checked', false);
            $("input[type='checkbox'][name='yellow']").prop('checked', false);
          }
        });
    });
</script>

Answer 1

我想我在下面的 fiddle 中找到了你要找的东西。我已经设置好它，所以如果添加其他颜色(蓝色和黄色除外)并且我们希望它们表现得像蓝色和黄色，我们不需要进行任何代码更改。逻辑是，如果选中绿色 => 取消选中所有其他选项，不要让它们被选中。如果所有其他人都被选中=>选择绿色并取消选中所有其他人。代码中有更多注释:

Fiddle w/ solution

var $green = $('.button[name="green"]'), //Get our special input, "green"
    $notGreen = $('.button').not($green); //Get all other inputs

$('.form-group').on('change', '.button', function() { //Attach handler at parent and delegate to .button class
    if (!$(this).is(':checked')) { return; } //Only want to act when something is being checked

    if ($green.is(':checked')) {
        //If green is checked, want to uncheck everything else
        $notGreen.prop('checked', false); //.prop is the best way to uncheck
    }
    else if ($notGreen.filter(':checked').length === $notGreen.length) {
        //If every other input other than green is checked, check green and uncheck everything else
        $notGreen.prop('checked', false);
        $green.prop('checked', true);
    }
});

编辑:这是来自支持多个分组的评论的更通用的代码:Generalized fiddle

检查下面的 fiddle 代码。

var $green = $('.button[name="green"]'), //Get our special input, "green"
    $notGreen = $('.button').not($green); //Get all other inputs

$('.form-group').on('change', '.button', function() { //Attach handler at parent and delegate to .button class
		if (!$(this).is(':checked')) { return; } //Only want to act when something is being checked
    
		if ($green.is(':checked')) {
    		//If green is checked, want to uncheck everything else
    		$notGreen.prop('checked', false); //.prop is the best way to uncheck
    }
    else if ($notGreen.filter(':checked').length === $notGreen.length) {
    		//If every other input other than green is checked, check green and uncheck everything else
    		$notGreen.prop('checked', false);
    		$green.prop('checked', true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group">
    <label for="blue">Blue
        <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>   
<div class="form-group">
    <label for="yellow">Yellow
        <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>
<div class="form-group">
    <label for="green">Green
        <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>