2013-03-17 65 views
0

我想操縱一系列按鈕點擊複選框,但我似乎無法弄清楚如何做到這一點。我需要實現以下操作:複選框jQuery操作

  1. 選擇所有複選框

  2. 選擇複選框1-12

  3. 選擇奇複選框

  4. 選擇甚至複選框

  5. 清除複選框

  6. 控制滑塊範圍選擇周

所有在更新的複選框。

這裏是我的jsfiddle:http://jsfiddle.net/dYsg7/

起初,我用的是下面的代碼,以滿足分1-5,但我已經改變了我的複選框的佈局我無法弄清楚如何落實到我的新的設計:

$('#week_none').click(function() { 
     $('#week_boxesForm li').each(function (index) { 
      $(this).find('input:checkbox').prop("checked", false); 
     }); 
    }); 

    $('#week_all').click(function() { 
     $('#week_boxesForm li').each(function (index) { 
      $(this).find('input:checkbox').prop("checked", true); 
     }); 
    }); 

    $('#week_term').click(function() { 
     $('#week_boxesForm li').each(function (index) { 
      if (index < 12) $(this).find('input:checkbox').prop("checked", true); 
      else $(this).find('input:checkbox').prop("checked", false); 
     }); 
    }); 

    $('#week_odd').click(function() { 
     $('#week_boxesForm li').each(function (index) { 
      if (index % 2 === 0) $(this).find('input:checkbox').prop("checked", true); 
      else $(this).find('input:checkbox').prop("checked", false); 
     }); 
    }); 

    $('#week_even').click(function() { 
     $('#week_boxesForm li').each(function (index) { 
      if (index % 2 !== 0) $(this).find('input:checkbox').prop("checked", true); 
      else $(this).find('input:checkbox').prop("checked", false); 
     }); 
    }); 

回答

2

這裏是怎麼做點1 - 6:

的Javascript

$(".slider_weekRange2").slider({ 
    range: true, 
    min: 1, 
    max: 15, 
    step: 1, 
    values: [1, 12], 
    slide: function (event, ui) { 
     $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]); 
     $('input:checkbox[name="weeks_1"]').prop("checked", false); 
     $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true); 
    } 
}); 

$(".search_weekRange2").val($(".slider_weekRange2").slider("values", 0) + 
    "-" + $(".slider_weekRange2").slider("values", 1)); 

$('.week_none').on('click', function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
}); 

$('.week_all').on('click', function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", true); 
}); 

$('.week_term').on('click', function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]').slice(0, 12).prop("checked", true); 
}); 

$('.week_odd').on('click', function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]:even').prop("checked", true); 
}); 

$('.week_even').on('click', function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]:odd').prop("checked", true); 
}); 

Demo

+0

有沒有可能當按下按鈕來更新文本框? – methuselah 2013-03-17 23:49:26

+0

是的,通過在每個點擊功能中加入以下內容:'$(「。search_weekRange2」).val('UPDATE TEXT HERE');' – 3dgoo 2013-03-17 23:52:32