javascript - jQuery:根据任意数量的复选框隐藏/显示 div

Question

我有 following code .

<div class="row">
    <div class="col-xs-4">
            <label class="checkbox-inline"><input type="checkbox" value="draft">Borrador</label>
    </div>
    <div class="col-xs-4">
            <label class="checkbox-inline"><input type="checkbox" value="cancel">Cancelado</label>
    </div>
        <div class="col-xs-4">
            <label class="checkbox-inline"><input type="checkbox" value="waiting" checked>Esperando</label>
    </div>
</div>
<div class="row">
    <div class="col-xs-4">
        <label class="checkbox-inline"><input type="checkbox" value="partially_available" checked>Parc. Disp.</label>
    </div>
        <div class="col-xs-4">
            <label class="checkbox-inline"><input type="checkbox" value="confirmed" checked>Confirmado</label>
    </div>
        <div class="col-xs-4">
            <label class="checkbox-inline"><input type="checkbox" value="assigned" checked>Asignado</label>
    </div>
</div>
<div class="row">
    <div class="col-xs-4">
        <label class="checkbox-inline"><input type="checkbox" value="done">Hecho</label>
    </div>
</div>


<div state="draft">Div1</div>
<div state="done">Div2</div>
<div state="assigned">Div3</div>
<div state="assigned">Div4</div>
<div state="done">Div5</div>

其中包含一组复选框，每个复选框都有一定的初始状态(选中/未选中)和一个值。如果需要，他们可以指定一个名称。

有任意数量的<div>其中包含一个名为 state 的属性(匹配其中一个复选框)。

• 应该在 jQuery 中使用什么来使每次用户与对应的复选框交互 <div>隐藏还是显示？
• 在 jQuery 中应使用什么来确保根据复选框状态运行初始回合以正确隐藏/显示 <div>是吗？

谢谢!

Answer 1

你可以尝试这样的事情:

// Iterates over each checkbox on window load
$(window).on('load',()=>{
  $('input[type="checkbox"]').each(toggleDivs);
});

// binds an onchange handler to each checkbox
$('input[type="checkbox"]').on('change',toggleDivs);

function toggleDivs(){
  // if its checked, show the div with the state equivelant to the checkbox's value
  if($(this).is(':checked')) $('div[state="' + $(this).val() + '"]').show();
  // otherwise hide it
  else  $('div[state="' + $(this).val() + '"]').hide();
}

Note: this code is untested and may require some proofreading