在两个复选框之间切换

Toggle between two checkboxes

本文关键字：复选框 之间 两个      更新时间：2023-09-26

我有两个复选框。一个用于显示列，另一个用于显示列中的项目。用户可以选中以使列名称可见，而无需选中该框以显示列中的项目。但是，如果用户选中该框以显示列中的项目。必须选中用于显示列的复选框，因为如果不使列也可见，则无法使项目在列中可见。

我很难想到一种逻辑可以在不绕圈子的情况下做到这一点。 

    <div>
        <div class="span3">Column is visible:</div>
        <div class="span9"><input type="checkbox" data-name="viewable" data-bind="checked: columnViewable" /></div>
    </div>
    <div>
        <div class="span3">Column items are visible:</div>
        <div class="span9"><input type="checkbox" data-name="viewableItems" data-bind="checked: columnItemsViewable" /></div>
    </div>

这是我对 js 的： 

     editElement.editElement = function () {
                    if (editElement.viewableItems()) {
                        editElement.columnViewable = ko.observable(true);
                        var columnView = editElement.columnViewable();
                    }
                    else
                        columnView = editElement.columnViewable();
                    grain.Ajax.Post({..submit data including checked boxes...})
      };

如果两个框都未选中，并且如果我选中可查看项目并保存它，它会自动将该列设置为 true，它对我来说工作正常。但是，如果两者都选中并且我取消选中列可见性并保存 - 它将重新检查列可见性，因为检查了可视项目。

如果可查看

列未选中，我是否应该禁用可查看项目复选框，这样两者都将设置为 false？

你不需要很多逻辑。 这是一个非常简单的jQuery解决方案：

$('#column,#item').hide();
function displayCol(check) {
  if (check) {
    $('#column').show();
  } else {
    $('#column').hide();
    $('#itemChanger').prop('checked',false);
  }
}
function displayItem(check) {
  if (check) {
    $('#column,#item').show();
    $('#columnChanger').prop('checked',true);
  } else {
    $('#item').hide();
  }
}
#column {
  width: 200px;
  height: 200px;
  background: green;
}
#item {
  width: 100px;
  height: 100px;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="column">Column
  <div id="item">Item</div>
</div>
Show Column:
<input type="checkbox" id="columnChanger" onchange="displayCol(this.checked)" />
<br/>Show Item:
<input type="checkbox" id="itemChanger" onchange="displayItem(this.checked)" />

我这样做的方法是在未选中"显示列"时禁用"显示项目"输入，并尝试使两个控件尽可能独立地运行：

.HTML：

<div class="column">
    <h1 class="title">Column 1</h1>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <div class="controls">
        <input id="show-items-1" class="show-items" type="checkbox" checked="checked" />
        <label for="show-items-1">Show items</label>
        <br/>
        <input id="show-column-1" class="show-column" type="checkbox" checked="checked" />
        <label for="show-column-1">Show column</label>
    </div>
</div>
<div class="column">
    <h1 class="title">Column 2</h1>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <div class="controls">
        <input id="show-items-2" class="show-items" type="checkbox" checked="checked" />
        <label for="show-items-2">Show items</label>
        <br/>
        <input id="show-column-2" class="show-column" type="checkbox" checked="checked" />
        <label for="show-column-2">Show column</label>
    </div>
</div>

.JS：

$("input", this).on("change", function () {
    var state = $(this).is(":checked"),
        showColumn = $(this).attr("class").search(/column/) > -1,
        elems = $(this).parents(".column").find("p");
    if (state) {
        if (showColumn) {
            $(this).siblings(".show-items").removeAttr("disabled");
            elems = $(this).siblings(".show-items").is(":checked") ? elems = $(this).parents(".column").find("h1,p") : $(this).parents(".column").find("h1");
        }
        elems.removeClass("hidden");
    } else {
        if (showColumn) {
            $(this).siblings(".show-items").attr("disabled", true);
            elems = $(this).parents(".column").find("h1, p");
        }
        elems.addClass("hidden");
    }
});

JSFiddle：

这是一个工作JSFiddle供参考。

相关文章：