当有多个复选框时，如何使用jquery在div中显示数据？ [英] How to display data in a div using jquery when there are multiple checkboxes?

问题描述

 <   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屋！