JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="className">
	<p class="mailCheck "><input type="checkbox" value="1" class="checkbox-select" id="questionnaire-check" <span>I dont wish to upload files at this time.</span></p>
	
	<div class="hideDiv hideUpload">
		<p>Upload box I wish to hide.</p>
        <input type="checkbox" value="1" class="checkbox-select" id="questionnaire-check">
	</div>
</div>

<div class="className">
	<p class="mailCheck "><input type="checkbox" value="1" class="checkbox-select" id="questionnaire-check" <span>I dont wish to upload files at this time.</span></p>
	
	<div class="hideDiv hideUpload">
		<p>Upload box I wish to hide.</p>
	</div>
</div>

<div class="className">
	<p class="mailCheck "><input type="checkbox" value="1" class="checkbox-select" id="questionnaire-check" <span>I dont wish to upload files at this time.</span></p>
	
	<div class="hideDiv hideUpload">
		<p>Upload box I wish to hide.</p>
	</div>
</div>

JavaScript

$('.mailCheck input').each(function() {

    
     $('.mailCheck input').on('click', function(){
    	if($('.mailCheck input:checked').length == 1){
    		$(this).closest('div').find('.hideUpload').slideUp();
    	}else {
    		$(this).closest('div').find('.hideUpload').slideDown();
    	}
    });
  });