javascript - 使用 JQuery 单击单选按钮后附加 DIV 仅使用父数据

标签 javascript jquery html radio-button

我想创建一个input-radio，用户可以在其中选择他们的选项并在该选项中填充数据，并扩展另一个input-radio来填充其他数据。但不幸的是，每当 radio 扩展时，所有扩展数据都仅使用 Parent-data...

已编辑:更改了代码片段以便更好地理解

您可以从下面看到它:

var index = 0;
$(document).on('click', '.choose_wdv', function() {
    //$(this).nextAll('.wdv_option:first').show();
    //$(this).nextAll('.slm_option:first').hide();
     $(".wdv_option").show();
     $(".slm_option").hide();
});

$(document).on('click', '.choose_slm', function() {
    //$(this).nextAll('.slm_option:first').show();
    //$(this).nextAll('.wdv_option:first').hide();
     $(".slm_option").show();
     $(".wdv_option").hide();
});

$(document).on('click', '.add-form-wdv_slm', addWDVSLMCombination);


function addWDVSLMCombination() {
  index++
  $("#sch8_wdvslm").append('<div class="wdv_slm_container" style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">'+
   '<div class="form-group">'+
    '<label class="control-label" style="padding-left: 25px;">Select Method</label>'+
     '<a href="javascript:void(0);" class="btn btn-outline-warning removeSch8wdvslm">Remove</a>'+
      '<div class="input-group">'+
        '<div class="radio" style="padding-left: 25px;">'+
         '<label><input type="radio" required id="choose_wdv" value="wdvslm_wdv" name="schedule8WDVSLM'+ index +'" class="choose_wdv">WDV</label>'+
          '<label><input type="radio" required id="choose_slm" value="wdvslm_slm" name="schedule8WDVSLM'+ index +'" class="choose_slm">SLM</label>'+
        '</div>'+
      '</div>'+
    '</div>'+

    '<div class="wdv_option" style="display:none;">'+
        '<p style="padding-left: 10px;">AS PER WDV METHOD</p>'+
        '<div class="schedule-container" style="border-style: dotted; border-radius: 10px; border-width: thin; border-top-left-radius: 5px; border-top-right-radius: 5px;">'+
          '<div class="col-md-12">'+
           '<div class="row">'+
            '<div class="col-md-2">'+
             '<label for="assetName">Name</label><br>'+
              '<input type="text" id="assetName" name="wdvName[]" class="form-control">'+
                '</div>'+
                 '<div class="col-md-2">'+
                   '<label for="assetDOP">DOP</label><br>'+
                    '<input type="date" id="assetDOP" name="wdvDOP[]" class="form-control date_of_purchase">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                      '<label for="assetOC">OC</label><br>'+
                      '<input type="number" min="0" id="assetOC" name="wdvOC[]" class="form-control originalCost">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetWDV">WDV</label><br>'+
                        '<input type="number" min="0" id="assetWDV" name="wdvWDV[]" class="form-control assWDV">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetADD">ADD</label><br>'+
                        '<input type="number" min="0" id="assetADD" name="wdvADD[]" class="form-control addition">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetEUL">EUL</label><br>'+
                        '<input type="number" min="0" id="assetEUL" name="wdvEUL[]" class="form-control no_of_year">'+
                    '</div>'+
                '</div>'+
            '</div>'+

            '<div class="col-md-12" style="padding-bottom: 10px;">'+
                '<div class="row">'+
                    '<div class="col-md-2">'+
                        '<label for="assetBDA">BDA</label><br>'+
                        '<input type="number" readonly min="0" id="assetBDA" name="wdvBDA[]" class="form-control bdaValue">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetDays">Day Used</label><br>'+
                        '<input type="number" readonly min="0" id="assetDays" name="wdvDayUsed[]" class="form-control dayUsed">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetRateofDep">Rate of Dep.</label><br>'+
                        '<input type="number" readonly min="0" id="assetRateofDep" name="wdvRate[]" class="form-control rateOfDep">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetDepAmount">Dep. Amount</label><br>'+
                        '<input type="number" readonly min="0" id="assetDepAmount" name="wdvDepAmount[]" class="form-control depAmount">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="assetNetBlock">Net Block</label><br>'+
                        '<input type="number" readonly min="0" id="assetNetBlock" name="wdvNetBlock[]" class="form-control netBlock">'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>'+

    '<div class="slm_option" style="display:none;">'+
        '<p style="padding-left: 10px;">AS PER SLM METHOD</p>'+
        '<div class="schedule-container-slm" style="border-style: dotted; border-radius: 10px; border-width: thin;border-top-left-radius: 5px; border-top-right-radius: 5px;">'+
            '<div class="col-md-12">'+
                '<div class="row">'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetName">Name</label><br>'+
                        '<input type="text" id="slmassetName" name="slmName[]" class="form-control">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetDOP">DOP</label><br>'+
                        '<input type="date" id="slmassetDOP" name="slmDOP[]" class="form-control date_of_purchaseSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetOC">OC</label><br>'+
                        '<input type="number" min="0" id="slmassetOC" name="slmOC[]" class="form-control originalCostSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetWDV">WDV</label><br>'+
                        '<input type="number" min="0" id="slmassetWDV" name="slmWDV[]" class="form-control assWDVSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetADD">ADD</label><br>'+
                        '<input type="number" min="0" id="slmassetADD" name="slmADD[]" class="form-control additionSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetEUL">EUL</label><br>'+
                        '<input type="number" min="0" id="slmassetEUL" name="slmEUL[]" class="form-control no_of_yearSLM">'+
                    '</div>'+
                '</div>'+
            '</div>'+

            '<div class="col-md-12" style="padding-bottom: 10px;">'+
                '<div class="row">'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetBDA">BDA</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetBDA" name="slmBDA[]" class="form-control bdaValueSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetDays">Day Used</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetDays" name="slmDayUsed[]" class="form-control dayUsedSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetRateofDep">Rate of Dep.</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetRateofDep" name="slmRate[]" class="form-control rateOfDepSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetDepAmount">Dep. Amount</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetDepAmount" name="slmDepAmount[]" class="form-control depAmountSLM">'+
                    '</div>'+
                    '<div class="col-md-2">'+
                        '<label for="slmassetNetBlock">Net Block</label><br>'+
                        '<input type="number" readonly min="0" id="slmassetNetBlock" name="slmNetBlock[]" class="form-control netBlockSLM">'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>'+

  '</div>');
  $("#sch8_wdvslm").on("click", ".removeSch8wdvslm", function() {
    $(this).closest('.wdv_slm_container').remove();
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wdv_slm_container" style="border-style: dotted; border-radius: 10px; border-width: thin;">
 <div class="form-group">
  <label class="control-label" style="padding-left: 25px;">Select Method</label>
  <div class="input-group">
   <div class="radio" style="    padding-left: 25px;">
     <label><input type="radio" required id="choose_wdv" value="wdvslm_wdv" name="schedule8WDVSLM" class="choose_wdv">WDV</label>
      <label><input type="radio" required id="choose_slm" value="wdvslm_slm" name="schedule8WDVSLM" class="choose_slm">SLM</label>
    </div>
  </div>
</div>

<div class="wdv_option" style="display:none;">
  <p style="padding-left: 10px;">AS PER WDV METHOD</p>
  <div class="schedule-container" style="border-style: dotted; border-radius: 10px; border-width: thin; border-top-left-radius: 5px; border-top-right-radius: 5px;">
  <div class="col-md-12">
     <div class="row">
        <div class="col-md-2">
           <label for="assetName">Name</label><br>
              <input type="text" id="assetName" name="wdvName[]" class="form-control">
         </div>
              <div class="col-md-2">
                  <label for="assetDOP">DOP</label><br>
                  <input type="date" id="assetDOP" name="wdvDOP[]" class="form-control date_of_purchase">
              </div>
              <div class="col-md-2">
                  <label for="assetOC">OC</label><br>
                  <input type="number" min="0" id="assetOC" name="wdvOC[]" class="form-control originalCost">
              </div>
              <div class="col-md-2">
                  <label for="assetWDV">WDV</label><br>
                  <input type="number" min="0" id="assetWDV" name="wdvWDV[]" class="form-control assWDV">
              </div>
              <div class="col-md-2">
                  <label for="assetADD">ADD</label><br>
                  <input type="number" min="0" id="assetADD" name="wdvADD[]" class="form-control addition">
              </div>
              <div class="col-md-2">
                  <label for="assetEUL">EUL</label><br>
                  <input type="number" min="0" id="assetEUL" name="wdvEUL[]" class="form-control no_of_year">
              </div>
          </div>
      </div>

      <div class="col-md-12" style="padding-bottom: 10px;">
          <div class="row">
              <div class="col-md-2">
                  <label for="assetBDA">BDA</label><br>
                  <input type="number" readonly min="0" id="assetBDA" name="wdvBDA[]" class="form-control bdaValue">
              </div>
              <div class="col-md-2">
                  <label for="assetDays">Day Used</label><br>
                  <input type="number" readonly min="0" id="assetDays" name="wdvDayUsed[]" class="form-control dayUsed">
              </div>
              <div class="col-md-2">
                  <label for="assetRateofDep">Rate of Dep.</label><br>
                  <input type="number" readonly min="0" id="assetRateofDep" name="wdvRate[]" class="form-control rateOfDep">
              </div>
              <div class="col-md-2">
                  <label for="assetDepAmount">Dep. Amount</label><br>
                  <input type="number" readonly min="0" id="assetDepAmount" name="wdvDepAmount[]" class="form-control depAmount">
              </div>
              <div class="col-md-2">
                  <label for="assetNetBlock">Net Block</label><br>
                  <input type="number" readonly min="0" id="assetNetBlock" name="wdvNetBlock[]" class="form-control netBlock">
              </div>
          </div>
      </div>
  </div>
</div>

<div class="slm_option" style="display:none;">
  <p style="padding-left: 10px;">AS PER SLM METHOD</p>
  <div class="schedule-container-slm" style="border-style: dotted; border-radius: 10px; border-width: thin;border-top-left-radius: 5px; border-top-right-radius: 5px;">
      <div class="col-md-12">
          <div class="row">
              <div class="col-md-2">
                  <label for="slmassetName">Name</label><br>
                  <input type="text" id="slmassetName" name="slmName[]" class="form-control">
              </div>
              <div class="col-md-2">
                  <label for="slmassetDOP">DOP</label><br>
                  <input type="date" id="slmassetDOP" name="slmDOP[]" class="form-control date_of_purchaseSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetOC">OC</label><br>
                  <input type="number" min="0" id="slmassetOC" name="slmOC[]" class="form-control originalCostSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetWDV">WDV</label><br>
                  <input type="number" min="0" id="slmassetWDV" name="slmWDV[]" class="form-control assWDVSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetADD">ADD</label><br>
                  <input type="number" min="0" id="slmassetADD" name="slmADD[]" class="form-control additionSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetEUL">EUL</label><br>
                  <input type="number" min="0" id="slmassetEUL" name="slmEUL[]" class="form-control no_of_yearSLM">
              </div>
          </div>
      </div>

      <div class="col-md-12" style="padding-bottom: 10px;">
          <div class="row">
              <div class="col-md-2">
                  <label for="slmassetBDA">BDA</label><br>
                  <input type="number" readonly min="0" id="slmassetBDA" name="slmBDA[]" class="form-control bdaValueSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetDays">Day Used</label><br>
                  <input type="number" readonly min="0" id="slmassetDays" name="slmDayUsed[]" class="form-control dayUsedSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetRateofDep">Rate of Dep.</label><br>
                  <input type="number" readonly min="0" id="slmassetRateofDep" name="slmRate[]" class="form-control rateOfDepSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetDepAmount">Dep. Amount</label><br>
                  <input type="number" readonly min="0" id="slmassetDepAmount" name="slmDepAmount[]" class="form-control depAmountSLM">
              </div>
              <div class="col-md-2">
                  <label for="slmassetNetBlock">Net Block</label><br>
                  <input type="number" readonly min="0" id="slmassetNetBlock" name="slmNetBlock[]" class="form-control netBlockSLM">
              </div>
          </div>
      </div>
  </div>
</div>
</div>

                                                        <div id="sch8_wdvslm"></div>
                                                        <button type="button" style=" margin-top: 10px;margin-bottom: 10px!important;" class="btn btn-primary btn-sm add-form-wdv_slm">Add More</button>

也许我尝试的方式也是完全错误的......

我不想使用id来附加数据，因为未设置扩展最大值，并且尝试仅使用类名来处理。

Is there any other way to do easily and understandable and to keep 1 class name for the function control

最佳答案

工作 fiddle http://jsfiddle.net/shree/xpvt214o/793020/

您可以定义变量并增加该变量，并将该变量附加到名称部分，以在绑定(bind)之前在 radio 上保持唯一性，如下所示进行分组。

var index = 0;
$(document).on('click', '.t1', function() {
 
  $(this).nextAll('.a:first').show();
  $(this).nextAll('.b:first').hide();
});

$(document).on('click', '.t2', function() {
  $(this).nextAll('.b:first').show();
  $(this).nextAll('.a:first').hide();
});

$(document).on('click', '.append-radio', addMoreRadio);

function addMoreRadio() {
  index++
  $('#append_both').append(
    '<input type="radio" name="test_data' + index + '" class="t1"> Test 1' +
    '<input type="radio" name="test_data' + index + '" class="t2">Test 2' +

    '<div class="a" style="display:none;">' +
    'This is Test 1 Expanded' +
    '</div>' +

    '<div class="b" style="display:none;">' +
    'This is Test 2 Expanded' +
    '</div>'
  );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="test_data" class="t1"> Test 1
<input type="radio" name="test_data" class="t2">Test 2



<div class="a" style="display:none;">
  This is Test 1
</div>

<div class="b" style="display:none;">
  This is Test 2
</div>


<div id="append_both"></div>
<button type="button" class="append-radio">Add More</button>

注意:ID 始终是唯一的，因此请使用类。上面的示例我将您的 ID 替换为类(class)。

关于javascript - 使用 JQuery 单击单选按钮后附加 DIV 仅使用父数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52326278/

上一篇：javascript - 删除成功后从表中删除行吗？

下一篇：javascript - 使用 fetch 将跨域 JSON 数据发布到 Express 后端

相关文章：

javascript - 如何用 jQuery 替换 HTML 但保留事件绑定(bind)

javascript - Chrome 警告框提交页面，即使返回 false

javascript - 当我在 codeigniter 中使用 jquery 发出警报时没有任何反应

javascript - 如何在 jquery 对话框中的固定宽度文本框中显示可变长度文本

jquery基于单选按钮选择切换div

javascript - 内部超链接在 Firefox 和 Internet Explorer 中不起作用

javascript - 从下拉列表中选择多个项目以填充在页面上

jquery - 使用选择列表动态加载 div 中的内容

html - 使用 CSS 过渡来更改元素位置

html - 是否可以在html中的p标签内使用form和div标签？

©2024 IT工具网  联系我们