ホームページ >ウェブフロントエンド >htmlチュートリアル >LI コンテンツ全体を選択して送信する方法_html/css_WEB-ITnose
LI コンテンツ全体を選択して送信する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:26:421289ブラウズ
: 6f5a77fac548ccef3cb8c9bf2738206de388a4556c0f65e1904146cc1a846bee名前94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
="画像/ dp_pic.jpg" width="90" height="90" />e388a4556c0f65e1904146cc1a846bee名前94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
.jpg" width="90" height="90" /> p>名前94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
"90" height="90" />e388a4556c0f65e1904146cc1a846bee名前94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb ;送信54bdf357c58b8a65c66d7c19c8e4d1140487be861047a274efdd4cf1caf49472
おそらく LI を選択すると、選択した LI の背景の色が変わり、送信できるようになります。
ラジオボタンでやっているのかお聞きしたいです。または、JS を使用してどれを選択するかを制御します。どうやってするの。
どのウェブサイトでこのエフェクトが使用されているか思い出せません。
この問題の解決を手伝ってくれる専門家はいますか?ありがとう。オンラインで待っています。どうもありがとうございます！ ！
ディスカッションへの返信(解決策)
<!doctype html><html><head><meta charset="utf-8"><title></title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style> ul,li{ padding:0; margin:0; list-style:none; } li{ width:100px; border:1px solid; background:#FFF; } input[type=checkbox]{ visibility:hidden; width:0; } span{ width:100%; } label{ display:block; } .selected{ background:#F60; } img{ width:20px; height:20px; }</style><script> $(function(){ $("input").change(function(){ var _this = $(this), li = _this.closest("li"); if(_this.is(":checked")){ li.addClass("selected"); }else { li.removeClass("selected"); } }); }); function submit(){ var chkVal = []; $("input[type=checkbox]:checked").each(function(){ chkVal.push(this.value); }); alert(chkVal); }</script></head><body> <div> <ul> <li><label><input type="checkbox" name="chk" value="1"/><span><img src="123.jpg"/>chk1</span></label></li> <li><label><input type="checkbox" name="chk" value="2"/><span><img src="123.jpg"/>chk2</span></label></li> <li><label><input type="checkbox" name="chk" value="3"/><span><img src="123.jpg"/>chk3</span></label></li> <li><label><input type="checkbox" name="chk" value="4"/><span><img src="123.jpg"/>chk4</span></label></li> <li><label><input type="checkbox" name="chk" value="5"/><span><img src="123.jpg"/>chk5</span></label></li> </ul> </div> <input type="button" value="submit" onclick="submit();"/></body></html> 3Q。それがその効果です。まだ聞きたいです。チェックボックスがスペースを占めることを望まない場合はどうすればよいですか?これで、チェックボックスが約 5 ピクセルを占めていることがわかります。しかし、幅はすでに 0 であることがわかります。
れーい
3Q。それがその効果です。まだ聞きたいです。チェックボックスがスペースを占めることを望まない場合はどうすればよいですか?これで、チェックボックスが約 5 ピクセルを占めていることがわかります。しかし、幅はすでに 0 であることがわかります。
input[type=checkbox] {
可視性: 非表示
境界線: 0;