效果图
![](https://img2020.cnblogs.com/blog/1359049/202108/1359049-20210805173313134-1073219111.png)
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
};
} );