布局总结五：多个radio单选操作--jquery

效果图

 

1.html布局代码

    <!-- 继电器控制 -->
    <h1>继电器控制</h1>
    <div>
        <span class="jdq" theindex="1">
            继电器1:
            <label><input type="radio" name="onoff1" value="0">on</label>
            <label><input type="radio" name="onoff1" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="2">
            继电器2:
            <label><input type="radio" name="onoff2" value="0">on</label>
            <label><input type="radio" name="onoff2" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="3">
            继电器3:
            <label><input type="radio" name="onoff3" value="0">on</label>
            <label><input type="radio" name="onoff3" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="4">
            继电器4:
            <label><input type="radio" name="onoff4" value="0">on</label>
            <label><input type="radio" name="onoff4" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="5">
            继电器5:
            <label><input type="radio" name="onoff5" value="0">on</label>
            <label><input type="radio" name="onoff5" value="1" checked>off</label>
        </span>
    </div>
    <div style="margin-top:20px;">
        <span class="jdq" theindex="6">
            继电器6:
            <label><input type="radio" name="onoff6" value="0">on</label>
            <label><input type="radio" name="onoff6" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="7">
            继电器7:
            <label><input type="radio" name="onoff7" value="0">on</label>
            <label><input type="radio" name="onoff7" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="8">
            继电器8:
            <label><input type="radio" name="onoff8" value="0">on</label>
            <label><input type="radio" name="onoff8" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="9">
            继电器9:
            <label><input type="radio" name="onoff9" value="0">on</label>
            <label><input type="radio" name="onoff9" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="10">
            继电器10:
            <label><input type="radio" name="onoff10" value="0">on</label>
            <label><input type="radio" name="onoff10" value="1" checked>off</label>
        </span>
    </div>
    <div style="margin-top:20px;">
        <span class="jdq" theindex="11">
            继电器11:
            <label><input type="radio" name="onoff11" value="0">on</label>
            <label><input type="radio" name="onoff11" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="12">
            继电器12:
            <label><input type="radio" name="onoff12" value="0">on</label>
            <label><input type="radio" name="onoff12" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="13">
            继电器13:
            <label><input type="radio" name="onoff13" value="0">on</label>
            <label><input type="radio" name="onoff13" value="1" checked>off</label>
        </span>
        <span class="jdq" theindex="14">
            继电器14:
            <label><input type="radio" name="onoff14" value="0">on</label>
            <label><input type="radio" name="onoff14" value="1" checked>off</label>
        </span>
    </div>

2.css代码

        .jdq{
            display:inline-block;
            margin-right:30px;
        }

3.jquery代码

        // 继电器控制
        $('.jdq input[type=radio]').change( function(){var relayIndex = $(this).parents(".jdq")[0].getAttribute("theindex");
            var status = $(this).val();
            
            var postdata = {
                "name":name,
                "relayIndex":relayIndex,
                "status":status
            };
            
        } );