顯示特定複選框的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

回答

相關問題