隐藏记录时复选框被选中

我试图隐藏/表中的取决于复选框节目记录检查情况隐藏记录时复选框被选中

HTML

<label>Add Additional Once off</label> 
    <input type="checkbox" id="chkAdditionalOnceoff" onChange="display();"value="0"><br> 
    <label>Add Additional Monthly</label> 
    <input type="checkbox" id="chkAdditionalMonthly" onChange="display();"value="0"> 
    <table> 
    <div id="AdditionalOnceoff" style="display:none"> 
    <tr><td><input type="text" id="txtField1"></td> 
     <td><input type="text" id="txtField2"></td> 
    </tr> 
    </div> 
    <tr><td colspan="2">Normal Record to Display always</td></tr> 
    <div id="AdditionalMonthly" style="display:none"> 
    <tr> 
     <td><input type="text" id="txtField3"></td> 
     <td><input type="text" id="txtField4"></td> 
    </tr> 
    </div> 
    </table>

JAVASCRIPT

function display(){ 
    if (document.getElementById("chkAdditionalOnceoff").checked) { 
    document.getElementById("AdditionalOnceoff").style.display = "inline"; 
    } else { 
    document.getElementById("AdditionalOnceoff").style.display = "none"; 
    } 
    if (document.getElementById("chkAdditionalMonthly").checked) { 
    document.getElementById("AdditionalMonthly").style.display = "inline"; 
    } else { 
    document.getElementById("AdditionalMonthly").style.display = "none"; 
    } 
}

所以当复选框被选中时，包含记录的对应< div>应该隐藏/显示

我找到了这个讨论Hiding other rows in a table when checkbox is selected 但找不到我的场景的一个工作示例。

来源

2017-06-29 Kurt Hectic

找到解决这甚至不是合法的HTML ...你不能只是把'div'到一个表在这个地方。 – CBroe

使用分而治之：将问题分解为最小的子问题，然后分别解决它们中的每一个问题。所有需要的信息都可以在SO和MDN等地获得。 – domsson

@CBroe我还会如何识别要显示/隐藏的代码段？ –

希望这样你就从这里

$(document).ready(function(){ 
 
    $('input[type="checkbox"]').click(function(){ 
 
     var inputValue = $(this).attr("value"); 
 
     $("." + inputValue).toggle(); 
 
    }); 
 
});

.box{ 
 
     color: #fff; 
 
     padding: 20px; 
 
     display: none; 
 
     margin-top: 20px; 
 
    } 
 
    .red{ background: #ff0000; } 
 
    .green{ background: #228B22; } 
 
    .blue{ background: #0000ff; } 
 
    label{ margin-right: 15px; }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label> 
 
     <label><input type="checkbox" name="colorCheckbox" value="green"> green</label> 
 
     <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label> 
 
    </div> 
 
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> 
 
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> 
 
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>

来源

2017-06-29 11:06:53

隐藏记录时复选框被选中

回答

相关问题