效果图
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 }; } );