克隆时如何通过单选按钮动态控制复选框

Question

我有这个表单，您可以在其中单击链接以克隆表单字段。我还有一个 selction if 在每个克隆的顶部单选按钮，它隐藏并显示复选框。我无法弄清楚为什么我可以在第一次迭代时执行此操作以及如何使其适用于每个克隆。

我的 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/

Answer 1

好的，我已经修补了一点。有一些误解从未起作用，而不是逻辑格式，所以我不得不稍微修改一下。它不漂亮，但它有效，我希望它不会弄乱你的概念。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>

​

.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);
​