0

我对表格 ZURB 基础有疑问。确实，表格显示正确，但我无法选择。

这是我的代码：您可以看到，在第一种形式中，收音机工作，但第二种不工作。

我尝试了很多方法来解决这个问题，但我不明白问题出在哪里。 

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../css/foundation.css"/>
        <link rel="stylesheet" href="../css/normalize.css"/>
        <script src="../js/vendor/custom.modernizr.js"></script>
        <title></title>
    </head>
    <body>
        <div class="row">  
            <form class="custom">
                <div class="row">
                    <div class="large-4 columns">
                        <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
                        <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
                    </div>
                </div>
            </form>
            <div class="section-container auto" data-section>
                <section>
                    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
                    <div class="content" data-section-content>
                        <form class="custom">
                            <div class="row">
                                <div class="large-4 columns">
                                    <label for="radio2"><input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
                                    <label for="radio2"><input name="radio2" type="radio" id="radio2" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
                <section>
                    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
                    <div class="content" data-section-content>
                       <p>section2</p>
                    </div>
                </section>
            </div>
        </div>

        <script src="../js/vendor/jquery.js"></script>
        <script src="../js/foundation/foundation.js"></script>
        <script src="../js/foundation/foundation.forms.js"></script>
        <script src="../js/foundation/foundation.section.js"></script>
        <script src="../js/vendor/zepto.js"></script>

        <script>
            $(document).foundation();

        </script>
   <body>
4

2 回答 2

1

您不能多次使用单个 id。大概就是这样。

于 2013-08-09T13:29:02.477 回答
0

尝试将idonly 设置为您想要选择的按钮或为每个选项使用不同的 id：

喜欢：

<form class="custom">
                <div class="row">
                    <div class="large-4 columns">
                        <label for="radio1"><input name="radio1" type="radio" id="CustomFormRadio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
                        <label for="radio1"><input name="radio1" type="radio" id="CustomFormRadio2" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
                    </div>
                </div>
            </form>

或者（假设你想要第一个你想要被选中）：

<form class="custom">
                <div class="row">
                    <div class="large-4 columns">
                        <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
                        <label for="radio1"><input name="radio1" type="radio" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
                    </div>
                </div>
            </form>

javaScript然后你可以使用with做任何你想做的事情jQuery，例如：

if($('#CustomFormRadio1').is(':checked')){ 
      //whatever you want here
}
于 2014-03-29T22:36:22.613 回答