Question

我想我可能会过度思考我的问题。

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

如果选中“蓝色”和“黄色”，则检查“绿色”，然后取消选中其他2个。只要选中“绿色”，就可以检查“蓝色”和“黄色”。如果选中“绿色”，则无需禁用它们。我想使用javascript文件，除非可以使用Jquery在更少的代码中完成。打开任何一个。

更新：我提供了HTML的速记版本，可能已经抛弃了如何处理“切换”。请参阅下面编辑的HTML。在这种情况下，我发现div “toggle btn btn-default” 的类需要从 “toggle btn btn-success off切换“

CODE SNIPPET EDITED

<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

我想我已经在下面的小提琴里找到了你想要的东西。我已经设置了它，所以如果添加其他颜色（蓝色和黄色除外）并且我们希望它们表现得像蓝色和黄色，我们将不需要进行任何代码更改。逻辑是如果绿色被检查=＆gt;取消选中所有其他人，不要让他们被选中。如果检查了所有其他人=>选择绿色并取消选中所有其他。代码中提供了更多注释：

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

检查以下小提琴代码。

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>

Answer 2

尝试以下摘录。

＆＃13;

$(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);
          }
        else
          {
            $("input[type='checkbox'][name='green']").prop('checked', false);
          }
    });
});

＆＃13;

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

＆＃13;

Answer 3

你也可以这样做，

＆＃13;

$(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='yellow']").prop('checked', false);
            $("input[type='checkbox'][name='blue']").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);
          }
    });
});

＆＃13;

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

＆＃13;

复选框切换选项

3 个答案: