当有多个复选框时,如何使用jquery在div中显示数据? [英] How to display data in a div using jquery when there are multiple checkboxes?
本文介绍了当有多个复选框时,如何使用jquery在div中显示数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< input type = 复选框 class = 填写 id = checkbox31 >
< label for = checkbox31 class = ju stify-content style = font-weight:bold;字体大小:0.9rem; 跨度> <跨度类= 代码关键字 >> 跨度> DISCONNECT / PO CANCEL理由<跨度类= 代码关键字>< 跨度> < span class =code-leadattribute> / label >
< div class = float-left >
< span class =code-keyword>< textarea name = Text1 cols = 40 行 = 4 > < / textarea >
< / div >
< ; 输入 type < span class =code-keyword> = 复选框 类 = 填写 id = checkbox3 >
< 标签 = checkbox3 class = justify-content style = font-weight:bold; font-size:0.9rem; > REP使用原因< / label >
< div class = float-left >
< textarea name = Text1 cols = 40 行 = < span class =code-keyword> 4 > < / textarea >
< < span class =code-leadattribute> / div >
< 输入 type = 复选框 class = 填写 id = checkbox3 onclick = myFunction() >
< label for = checkbox3 类 = justify-content 样式 = font-weight :胆大; font-size:0.9rem; > CUSTOMER OBJECTION < / label >
< div class = float-left >
< textarea 名称 = Text1 cols = 40 行 = 4 > < / textarea >
< / div >
< div id = autoUpdate 样式 = display:none >
< 输入 类型 = 复选框 class = 填写 id = checkbox301 >
< label for = checkbox301 < span class =code-attribute> class = label-table > < / label >
< label for = input15 class = col-sm-9 col-form-label pt-2 > 促销已停止< / label >
< br / >
< 输入 type = 复选框 class = 填写 id = checkbox301 >
< label for = checkbox301 class = label-table > < / label < span class =code-keyword>>
< label for = input15 class = col-sm-9 col-form-label pt-2 > Abonded service < / label >
< br / >
< / div >
< div id = Reason2 style = display:none >
< label = < span class =code-keyword> input15 class = col-sm-9 col-form-label pt-2 > 原因l < / label >
< label = input15 class = col-sm-9 col-form-label pt-2 > 原因2 < / label >
< label for = input15 class = col-sm-9 col-form- label pt-2 > 原因3 < / label >
< / div >
[![请参阅图片复选框需要显示代码,如复选框中所示] [1]] [1]
下面是jquery函数
$(document).ready(function()
{
$('#checkbox31')。change(function()
{
if(this.checked)
$('#自动更新)淡入(慢);
else
$('#autoUpdate')。fadeOut('slow');
});
});
我的尝试:
我在复选框选中时尝试使用jquery显示数据。我要获取单个复选框的数据,但我需要为每个复选框显示不同的数据。下面是html和jquery的代码
任何人都可以帮我创建一个可以捕获id的函数检查复选框时,其他复选框显示数据?我是新这里jqueryenter代码
解决方案
(文件)。就绪(函数()
{
('#checkbox31')。change(function()
{
if(this.checked)
('#autoUpdate')。fadeIn('slow');
else
<input type="checkbox" class="filled-in" id="checkbox31">
<label for="checkbox31" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">DISCONNECT/PO CANCEL REASONS</label>
<div class="float-left">
<textarea name="Text1" cols="40" rows="4"></textarea>
</div>
<input type="checkbox" class="filled-in" id="checkbox3">
<label for="checkbox3" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">REP USED REASON</label>
<div class="float-left">
<textarea name="Text1" cols="40" rows="4"></textarea>
</div>
<input type="checkbox" class="filled-in" id="checkbox3" onclick="myFunction()">
<label for="checkbox3" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">CUSTOMER OBJECTION</label>
<div class="float-left">
<textarea name="Text1" cols="40" rows="4"></textarea>
</div>
<div id="autoUpdate" style="display:none">
<input type="checkbox" class="filled-in" id="checkbox301">
<label for="checkbox301" class="label-table"></label>
<label for="input15" class="col-sm-9 col-form-label pt-2">Promotion discontinued</label>
<br />
<input type="checkbox" class="filled-in" id="checkbox301">
<label for="checkbox301" class="label-table"></label>
<label for="input15" class="col-sm-9 col-form-label pt-2">Abonded service</label>
<br />
</div>
<div id="Reason2" style="display:none">
<label for="input15" class="col-sm-9 col-form-label pt-2">Reason l</label>
<label for="input15" class="col-sm-9 col-form-label pt-2">Reason 2</label>
<label for="input15" class="col-sm-9 col-form-label pt-2">Reason 3</label>
</div>
[![Please refer the image the check box needs to display code as as in the checkbox][1]][1]
Below is the jquery function
$(document).ready(function ()
{
$('#checkbox31').change(function ()
{
if (this.checked)
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
What I have tried:
I am trying to display data using jquery when check box is checked. I am to get the data for a single check box but i need to display data differently for each check box. Below is the code for html and jquery
Can anyone help me to create a function which can capture the ids of other check boxes to display data when check box is checked? I'm new to jqueryenter code here
解决方案
(document).ready(function () {
('#checkbox31').change(function () { if (this.checked)
('#autoUpdate').fadeIn('slow'); else
这篇关于当有多个复选框时,如何使用jquery在div中显示数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文