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

Array of Radio buttons directly related to array of Checkboxes

本文关键字：数组 单选按钮 复选框      更新时间：2023-09-26

>具体来说，我有一个 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 都是复选框

感谢小巨人——最接近工作 - JSFIDDLE

与其使用大量连续的if语句，不如使用 switch 语句。

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

使单选按钮影响复选框

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

使复选框影响单选按钮。

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

$('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>

相关文章：