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

Question

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

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

And my functions:

 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();

           ;
          }
        });

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

Answer 1

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

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

这是 fiddle 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);

​