已知有5個checkbox
內容大概如下
手續1 checkbox
手續2 checkbox
手續3checkbox
手續4checkbox
手續5 checkbox
每次選中一個checkbox都在頁面的上方顯示checkbox的內容
例如選中手續1和手續4checkbox
頁面上方就顯示手續1和手續4
接著取消選中手續1，然后選擇手續5
之前頁面保留的手續4還在，追加手續5，洗掉手續1
如何用jq實作呢
新人小白，求大神幫忙看看
uj5u.com熱心網友回復：
有沒有大哥看看呀
我不行了
uj5u.com熱心網友回復：
老哥有嗎，大神帶我飛吧uj5u.com熱心網友回復：
寫的比較粗暴，可以試一下
<div id="final"></div>
<div>
<input type="checkbox" name="ck" value="https://bbs.csdn.net/topics/1" id="ck1">
<label for="ck1">手續1</label>
</div>
<div>
<input type="checkbox" name="ck" value="https://bbs.csdn.net/topics/2" id="ck2">
<label for="ck2">手續2</label>
</div>
<div>
<input type="checkbox" name="ck" value="https://bbs.csdn.net/topics/3" id="ck3">
<label for="ck3">手續3</label>
</div>
<div>
<input type="checkbox" name="ck" value="https://bbs.csdn.net/topics/4" id="ck4">
<label for="ck4">手續4</label>
</div>
<div>
<input type="checkbox" name="ck" value="https://bbs.csdn.net/topics/5" id="ck5">
<label for="ck5">手續5</label>
</div>
<script>
$(function(){
$("input[name='ck']").click(function(){
var t = $(this);
var c = $("#final").text();
var n = t.siblings('label').text();
var q = t.prop('checked') == true ? (c+n) : (c.split(n).join(""));
$("#final").text(q);
});
});
</script>
uj5u.com熱心網友回復：
<div id="text"></div>
手續1<input type="checkbox" class="check" value="https://bbs.csdn.net/topics/手續1"/><br>
手續2<input type="checkbox" class="check" value="https://bbs.csdn.net/topics/手續2"/><br>
手續3<input type="checkbox" class="check" value="https://bbs.csdn.net/topics/手續3"/><br>
手續4<input type="checkbox" class="check" value="https://bbs.csdn.net/topics/手續4"/><br>
手續5<input type="checkbox" class="check" value="https://bbs.csdn.net/topics/手續5"/><br>
<script type="text/javascript">
$(".check").change(function(event){
$("#text").text($(".check:checked").map(function(){
return $(this).val();
}).get().join(","));
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/108309.html
標籤：JavaScript