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>

我的职能：

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

克隆时如何通过radiobuttons动态控制复选框

1 个答案: