显示特定复选框的DIV

我有5个复选框。我想显示DIV（类= “hideDiv”）仅当3TD复选框被选中（值= “3”）显示特定复选框的DIV

<td class="longLabel"> 
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' /> <label>Waiting for support to reply</label></p> 
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' /> <label>Waiting for customer to reply</label></p> 
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' /> <label>Solved</label></p> 
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' /> <label>QA</label></p> 
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' /> <label>Waiting for programmer to reply</label></p>    
</td> 


<div id='3' class="hideDiv" style='display: none; clear: both'> 
    content 
</div>

来源

2016-11-20 Roi

下面是代码。它只显示div当且仅当只有第三个被检查，而不是第三个和另一个。如果选择3rd并显示其他信息，则可以将其更改为显示。

$(".tinyField").change(function() { 
    if ($(".tinyField:checked").val() === "3" && $(".tinyField:checked").length === 1) { 
     $(".hideDiv").show(); 
    } else { 
     $(".hideDiv").hide(); 
    } 
});

$(".tinyField").change(function() { 
 
    if ($(".tinyField:checked").val() === "3" && $(".tinyField:checked").length === 1) { 
 
     $(".hideDiv").show(); 
 
    } else { 
 
     $(".hideDiv").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<td class="longLabel"> 
 
    <p> 
 
     <input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' /> 
 
     <label>Waiting for support to reply</label> 
 
    </p> 
 
    <p> 
 
     <input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' /> 
 
     <label>Waiting for customer to reply</label> 
 
    </p> 
 
    <p> 
 
     <input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' /> 
 
     <label>Solved</label> 
 
    </p> 
 
    <p> 
 
     <input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' /> 
 
     <label>QA</label> 
 
    </p> 
 
    <p> 
 
     <input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' /> 
 
     <label>Waiting for programmer to reply</label> 
 
    </p> 
 
</td> 
 

 

 
<div id='3' class="hideDiv" style='display: none; clear: both'> 
 
    content 
 
</div>

来源

2016-11-20 15:49:40 Ergec

这是香草JavaScript的解决方案

window.onload = function() { 
 
    var checkboxes = document.querySelectorAll('input[type=checkbox]'); 
 
var thirdDiv= document.getElementById('3'); 
 
    checkboxes.forEach(function(checkbox) { 
 
    
 
    checkbox.addEventListener('change', function() { 
 
     var value = this.value; 
 
     if (this.value == 3 && this.checked) { 
 
     thirdDiv.classList = 'hideDiv'; 
 
     } 
 
     else 
 
     thirdDiv.classList=""; 
 
    }); 
 
    }); 
 

 

 
}

.hideDiv { 
 
    display: none; 
 
    clear: both; 
 
}

<p> 
 
    <input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' /> 
 
    <label>Waiting for support to reply</label> 
 
</p> 
 
<p> 
 
    <input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' /> 
 
    <label>Waiting for customer to reply</label> 
 
</p> 
 
<p> 
 
    <input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' /> 
 
    <label>Solved</label> 
 
</p> 
 
<p> 
 
    <input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' /> 
 
    <label>QA</label> 
 
</p> 
 
<p> 
 
    <input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' /> 
 
    <label>Waiting for programmer to reply</label> 
 
</p> 
 
</td> 
 

 

 
<div id='3'> 
 
    content 
 
</div>

希望它可以帮助

来源

2016-11-20 16:00:50 Geeky

显示特定复选框的DIV

回答

相关问题