1

我有这个表单，您可以在其中单击链接以克隆表单字段。我在每个克隆的顶部也有一个选择单选按钮，它隐藏并显示带有它的复选框。我无法弄清楚为什么我可以在第一次迭代中做到这一点，以及如何让它适用于每个克隆。

我的 html 看起来像这样

              <tr> // if the first radio button is selected, the checkbox appears and disappears on selecting 2nd
              <td width="250px"><span style="color: #cc0000;">*</span> Please check the costs that apply:</td>
              <td><input id="Cost_1" type="radio" value="15" name="Costs"/> First Cost: $15 <br/>
              <input id="Cost_2" type="radio" value="10" name="Costs"/> Second cost: $10 <br/>
              <tr id="special_offers">
                  <td>
              <input  type="checkbox" value="5" name="special_offers"/> <span id="optional_span">Special Offers: $5


          <tr>
            <td> First name:</td>
            <td><input name="first_name_id_1" type="text" id="first_name_id_1" size="15" class="required"></td>
              </tr>
          <tr>
            <td> Last name:</td>
            <td><input name="last_name_id_1" type="text" id="last_name_id_1" size="15" ></td>
          </tr>
          <tr>

    </tbody>
    <tr>
        <td><a href="#" onClick="addFormField(); return false;">Register additional attendee</a></td>    
      </tr>
      <tr>

我的功能：

 function addFormField() {

            var currentCount =  $('.multiplerows').length;
              var newCount = currentCount+1;
            var lastRepeatingGroup = $('.multiplerows:last')
            var newSection = lastRepeatingGroup.clone();
            newSection.find('input').val(''); //clears the text fields//
            $('input[type=radio]',newSection).removeAttr('checked');

            $('input[type=checkbox]',newSection).removeAttr('checked');
            newSection.insertAfter(lastRepeatingGroup);
            newSection.find("input").each(function (index, input) {
                input.id = input.id.replace("_" + currentCount, "_" + newCount);
                input.name = input.name.replace("_" + currentCount, "_" + newCount);
            });
            newSection.find("label").each(function (index, label) {
                var l = $(label);
                l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
            });
            return false;



        };

        $("input[name='Costs']").click(function() {
          if(document.getElementById('Cost_1').checked) {

            $("#special_offers").show();

          } else {

            $("#special_offers").hide();

           ;
          }
        });

出于某种原因，小提琴不起作用，但我没有问题克隆此表单上的元素，我的问题是如果用户单击顶部的第二个单选按钮并让该选项可用，我的问题是使复选框变灰，每次用户单击以注册新的与会者。希望小提琴能给你一些想法。 http://jsfiddle.net/qnAHq/7/

4

1 回答 1

0

好的，我已经修补了一点。有一些误解从未使它起作用，不是在逻辑格式中，所以我不得不对其进行一些修改。它不漂亮，但它有效，我希望它不会弄乱你的概念。onClick attr 触发器不起作用，所以我稍微改变了设计。我想你可以修改如果它必须是另一种方式，如果有任何问题我可以帮助你。

但是，如果您在事件驱动设计上投入时间，您将更容易出错。以这种 js 编码方式，你总是会遇到问题，而且它是不可维护的。假设你想改变你的逻辑，你必须修改很多。这段时间花在调试上，你可以把它放在改进编码上。

这是小提琴http://jsfiddle.net/qnAHq/40/，BR

<table>
    <tbody class="multiplerows">
        <tr>
            <td width="250px"><span style="color: #cc0000;">*</span> Please check the costs that apply:</td>
            <td>
                <input id="Cost_1" type="radio" value="45" name="Costs1" class="costs"
                />Cost 1: $45
                <br/>
                <input id="Cost_2" type="radio" value="15" name="Costs1" class="costs"
                />Cost 2: $15
                <br/>
                <tr id="speial_offers">
                    <td>
                        <input type="checkbox" value="15" name="special_offers" /> <span id="optional_span"> Special Offers</span>

                    </td>
            </td>
            </tr>
            <tr>
                <td>First name:</td>
                <td>
                    <input name="Billing_first_name_id_1" type="text" id="Billing_first_name_id_1"
                    size="15">
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td>
                    <input name="Billing_last_name_id_1" type="text" id="Billing_last_name_id_1"
                    size="15">
                </td>
            </tr>
            <tr>
                <td class="hr" colspan="2">
                    <hr />
                </td>
            </tr>
    </tbody>
    <tr>
        <td><a href="#" id="regCtrl">Register additional attendee</a>

        </td>
    </tr>
</table>

​</p>

js： 

(function(window,undefined){

        $(function(){
            $('#regCtrl').click(addFormField);
            $("input.costs").click(costsInpHandler);
        });

        var formcount = 1;

        function addFormField() {
            var lastRepeatingGroup = $('.multiplerows:last');
            var newSection = cloneSection(lastRepeatingGroup);        
            cloneSectionSettings(newSection,lastRepeatingGroup);

            return false;
        };


        function cloneSection(lastRepeatingGroup) {
            var newSection = lastRepeatingGroup.clone();
            var costsInp = $("input.costs", newSection);
            $("input.costs", lastRepeatingGroup).each(function(i){
                var originInpVal = $(this).val();
                $(costsInp[i]).attr("value",originInpVal);
            });
            formcount++;
            costsInp.click(costsInpHandler);

            return newSection;
        }


        function cloneSectionSettings(newSection,lastRepeatingGroup){
            var currentCount = $('.multiplerows').length;
            var newCount = currentCount + 1;
            //newSection.find('input').val(''); This one was clearing your input price values so == '15' never occurs 
            $('input[type=radio]', newSection).removeAttr('checked');
            $('input[type=checkbox]', newSection).removeAttr('checked');
            newSection.insertAfter(lastRepeatingGroup);
            newSection.find("input").each(function (index, input) {
                input.id = input.id.replace("_" + currentCount, "_" + newCount);
                var n = input;
                input.name = input.name.replace("Costs" + currentCount, "Costs" + newCount);
            });
            newSection.find("label").each(function (index, label) {
                var l = $(label);
                l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
            });

        }


        function costsInpHandler() {
            var parent = $(this).parents('tbody.multiplerows');
            var certCost1 = $(this);
            var inital = certCost1.is(":checked");

            var optionalSpan = $("#optional_span", parent)[inital ? "removeClass" : "addClass"]("gray");
            var optionalCost = $("input[name='special_offers']", parent).attr("disabled", !inital);
            if ($("input.costs:checked", parent).val() == '15') {
                optionalSpan["addClass"]("gray");
                optionalCost.attr("checked", false);
                optionalCost.attr("disabled", true);
            } else {
                optionalSpan["removeClass"]("gray");
                optionalCost.removeAttr("disabled");
            }
        }

    })(window);

​
于 2012-12-15T03:13:46.667 回答