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

查看:61
本文介绍了当有多个复选框时,如何使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆