本文實例講述了jquery複選框多選賦值給文字方塊的方法。分享給大家供大家參考。具體實作方法如下： 複製程式碼 代碼如下: jquery點選複選框觸發事件給input賦值 <br /> * { <br /> margin: 0; <br /> padding: 0; <br /> list-style-type: none; <br /> } <br /> <br /> a, img { <br /> border: 0; <br /> text-decoration: none; <br /> } <br /> <br /> body { <br /> font: 12px/180% Arial, Helvetica, sans-serif, "新宋體"; <br /> } <br /> <br /> table { <br /> empty-cells: show; <br /> border-collapse: collapse; <br /> border-spacing: 0; <br /> } <br /> /* tablist */ <br /> .tablist { <br /> width: 400px; <br /> border: solid 8px #ddd; <br /> margin: 40px auto; <br /> } <br /> <br /> .tablist td { <br /> line-height: 24px; <br /> border-bottom: solid 1px #ddd; <br /> text-align: left; <br /> padding: 10px; <br /> } <br /> <br /> .tablist td input { <br /> line-height: 20px; <br /> margin-left: 5px; <br /> } <br /> .tablist td .txtValue <br /> <br /> { <br /> padding: 3px 0; <br /> width: 180px; <br /> } <br /> 全選 張三 李四 趙五 王六 <br /> $(function(){ <br /> $('[data-type="checkbox"]').click(function(){ <br /> var data_value = $(this).attr('data-value'), <br /> txtalso = $.trim($(".txtValue").val()); <br /> if($(this).prop("checked")) { <br /> if(txtalso.length > 0) { <br /> if(txtalso.indexOf(data_value ',') != -1) { <br /> return ; <br /> } else { <br /> txtalso = data_value ','; <br /> } <br /> } else { <br /> txtalso = data_value ','; <br /> } <br /> } else { <br /> if(txtalso.indexOf(data_value ',') != -1) { <br /> txtalso = txtalso.replace(data_value ',', ''); <br /> } <br /> } <br /> $(".txtValue").val(txtalso); <br /> }); <br /> $('[data-type="checkall"]').click(function(){ <br /> var str = ''; <br /> if($(this).prop("checked")) { <br /> $.each($('[data-type="checkbox"]'), function(i){ <br /> str = $(this).attr('data-value') ','; <br /> }); <br /> $('[data-type="checkbox"]').prop('checked', true); <br /> } else { <br /> $('[data-type="checkbox"]').prop('checked', false); <br /> } <br /> $(".txtValue").val(str); <br /> }); <br /> }); <br /> 希望本文所述對大家的jQuery程式設計有所幫助。
