javascript - onclick 复选框显示数据 - 取消选中公共(public)文件应该继续显示

Question

致力于: 当单击复选框数据时，将显示我在代码段中提到的通用数据。

问题是 当您取消选中时，应该有一个相反的检查过程。

例如当我检查 “一”然后显示第一行和第三行。 “二”则显示所有三行。

但是当我取消选中“二/一”时，公共(public)行不应显示三。

所以我关于取消选中公共(public)文件的问题应该继续显示。

请问有人能帮我解决这个问题吗？

// onclick checkbox display files to upload

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {

    var inputValue = $(this).attr("value");
    var chkId = $(this).attr("id");

    if (document.getElementById(chkId).checked == true) {
      $('.' + inputValue).fadeIn('slow');
    } else {
      $('.' + inputValue).fadeOut('slow');
    }


    //  alert("Id: " + chkId + " Value: " + inputValue);

  });
});

legend {
  font-size: 14px;
}

.fileupload {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <fieldset>
      <legend>please mark on?</legend>

      <div class="custom-control custom-checkbox mb-3 ">
        <input type="checkbox" class="custom-control-input" id="checkbox1" value="one">
        <label class="custom-control-label" for="checkbox1">checked one </label>
      </div>

      <div class="custom-control custom-checkbox mb-3">
        <input type="checkbox" class="custom-control-input" id="checkbox2" value="two">
        <label class="custom-control-label" for="checkbox2">checked-two</label>
      </div>




    </fieldset>
  </div>
</div>


<div class="row">
  <div class="col-md-12">
    <fieldset>
      <legend>Result </legend>

      <div class="fileupload one">checked - one </div>
      <div class="fileupload two">checked - two </div>
      <div class="fileupload one two">One Or/and Two</div>


    </fieldset>
  </div>
</div>

Answer 1

这可以通过以下方式实现。

点击复选框

• 隐藏所有结果消息
• 从所有选中的输入框中获取值并保存到数组中
• 遍历数组并显示结果

// onclick checkbox display files to upload
$(document).ready( function() {
showMessageOnCheckboxChange();
$('input[type="checkbox"]').click( function() {
    showMessageOnCheckboxChange();
});
});

function showMessageOnCheckboxChange() {
// hide all results
$('.fileupload').fadeOut('fast');
var inputs = $('.custom-control-input');
var toShow = new Array();
inputs.each( function( index, obj ) {      
    var input = $(obj);
    if (input.prop('checked') == true) {
       toShow.push(input.attr('value'));   
    }
});
// show results
for (sh in toShow) {
    $('.' + toShow[sh]).fadeIn('slow');
}
}

legend {
font-size: 14px;
}

.fileupload {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
<div class="col-md-12">
    <fieldset>
        <legend>please mark on?</legend>
        <div class="custom-control custom-checkbox mb-3 ">  
            <input type="checkbox" class="custom-control-input" id="checkbox1" value="one">
            <label class="custom-control-label" for="checkbox1">checked one</label>
        </div>

        <div class="custom-control custom-checkbox mb-3">
            <input type="checkbox" class="custom-control-input" id="checkbox2" value="two">
            <label class="custom-control-label" for="checkbox2">checked-two</label>
        </div>
    </fieldset>
</div>
</div>


<div class="row">
<div class="col-md-12">
    <fieldset>
        <legend>Result </legend>

        <div class="fileupload one">checked - one </div>
        <div class="fileupload two">checked - two </div>
        <div class="fileupload one two">One Or/and Two</div>
    </fieldset>
</div>
</div>