Question

具体来说，我有一系列3个单选按钮，在5个复选框的范围之前，附加一个计算器字段，根据选择的复选框数给出不同的值。

示例：

单选按钮：1
  单选按钮：2
  单选按钮：3

复选框：a   复选框：b
  复选框：c
  复选框：d
  复选框：e

如果选中了1-2个复选框，则每个复选框的值为50
如果选中3个复选框，则值为125
如果选择了4个复选框，则值为155
如果选中5（全部）复选框，则值为170

我使用此脚本正常运行此功能：

<script type="text/javascript">
jQuery(document).ready(function($){$('input[type="checkbox"]').on('change', function() {

    if($('input[type="checkbox"]:lt(5):checked').length == 1) {
        greeting = "50";
    } else if ($('input[type="checkbox"]:lt(5):checked').length == 2) {
      greeting = "100";
    } else if ($('input[type="checkbox"]:lt(5):checked').length == 3) {
       greeting = "125";
    } else if ($('input[type="checkbox"]:lt(5):checked').length == 4) {
        greeting = "155";
    } else if ($('input[type="checkbox"]:lt(5):checked').length == 5) {
greeting = "170";
    };

    document.getElementById("input_53_34").value = greeting;

});
});
</script>

这是我需要的东西，我不确定最好的方法：

如果选择单选按钮1 - 将复选框字段视为正常
如果选择单选按钮2 - 选中复选框a，b，c
如果选择单选按钮3 - 选中复选框a，b，c，d，e（全部）
如果复选框选择更改为数量（长度）2或4，请切换回到单选按钮1
如果复选框选择为a，b，c或ALL，请切换到单选按钮2或3 分别

基本上，单选按钮2是3个特定的复选框（a，b，c），而单选按钮3是所有复选框

感谢TINYGIANT - 工作最近 - JSFIDDLE

Answer 1

使用switch statements。

，而不是使用大量连续的if语句

你必须从两个方向攻击它。

使单选按钮影响复选框

将单击处理程序附加到单选按钮
重置所有复选框
如果单击第一个单选按钮，则不执行任何操作
如果单击第二个单选按钮，请选中第1个，第2个和第3个复选框
如果单击第3个单选按钮，请选中所有复选框

使复选框影响单选按钮。

将单击处理程序附加到复选框
重置所有单选按钮
如果选中所有复选框，请选择第3个单选按钮
如果选中第1个，第2个和第3个复选框，请选择第2个单选按钮
如果选中任何其他复选框组合，请选择第一个单选按钮

$('input[type=radio]').click(function(){
    $('input[type="checkbox"]').prop('checked',false);
    switch(this.value) {
        case "2":
            $('input[type=checkbox]:nth-child(1), input[type=checkbox]:nth-child(2),input[type=checkbox]:nth-child(3)').prop('checked',true);
            break;
        case "3":
            $('input[type=checkbox]').prop('checked',true);
            break;

    }
});
$('input[type=checkbox]').change(function(){
    var checked = $('input[type=checkbox]:checked');
    $('input[type=radio]').prop('checked',false);
    console.log($('input[type=checkbox][value=1]:checked').length);
    if(checked.length === 5) {
        $('input[type=radio][value=3]').prop('checked',true);
    } else if( $('input[type=checkbox][value=1]:checked').length 
           &&  $('input[type=checkbox][value=2]:checked').length 
           &&  $('input[type=checkbox][value=3]:checked').length
           && !$('input[type=checkbox][value=4]:checked').length) {
        $('input[type=radio][value=2]').prop('checked',true);
    } else {
        $('input[type=radio][value=1]').prop('checked',true);
    }
});

<div id="radios">
    <input type="radio" name="radio" value="1" checked>
    <input type="radio" name="radio" value="2">
    <input type="radio" name="radio" value="3">
</div>

<div id="boxes">
    <input type="checkbox" name="checkboxes[]" value="1">
    <input type="checkbox" name="checkboxes[]" value="2">
    <input type="checkbox" name="checkboxes[]" value="3">
    <input type="checkbox" name="checkboxes[]" value="4">
    <input type="checkbox" name="checkboxes[]" value="5">
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

与复选框数组直接相关的单选按钮数组

1 个答案: