代码之家  ›  专栏  ›  技术社区  ›  Vpa

使用JQuery单击单选按钮后追加DIV只使用父数据

radio-button html jquery javascript
  •  0
  • Vpa  · 技术社区  · 6 年前

    我想创建一个 input-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 追加数据导致未设置扩展的最大值并尝试使用 class name 只是。

    有没有其他方法可以简单易懂地完成并为函数控件保留一个类名

    2 回复  |  直到 6 年前
        1
  •  1
  •   Vpa    6 年前

    工作小提琴 http://jsfiddle.net/shree/xpvt214o/793020/

    您可以定义变量并增加该变量,然后在绑定之前将该变量附加到收音机上的name部分以获得唯一性,如下所示进行分组。 

    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总是唯一的,所以使用class。上面的例子我将你的ID替换为类。

        2
  •  1
  •   Uttam Gupta    6 年前 

     $(document).on('click', '.t1', function () {
            if ($(this).parent().attr("id") == "append_both") {
                $(this).nextAll().eq(1).show();
                $(this).nextAll().eq(2).hide();
            }
            else {
                $('#t1_data').show();
                $('#t2_data').hide();
            }
        });

        $(document).on('click', '.t2', function () {
            if ($(this).parent().attr("id") == "append_both") {
                $(this).nextAll().eq(1).show();
                $(this).nextAll().eq(0).hide();
            }
            else {
                $('#t2_data').show();
                $('#t1_data').hide();
            }
        });

        $(document).on('click', '.append-radio', function () {

            var len = $('#append_both hr').length;
            addMoreRadio('test_data' + len);

        });

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

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

              '<div class="t2_data" style="display:none;">' +
                'This is Test 2 Expanded' +
              '</div>'
            );
        }
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    6 月前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    6 月前
    Alex  ·  在轻量级中同时解构和不解构变量
    6 月前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    6 月前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    6 月前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    6 月前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    6 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    7 月前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    7 月前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    7 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号