もう古いものは・・・

JavaScript

今日から


<!DOCTYPE html>
で、行きましょう！すっきりするし。


前方一致で拾えた〜！
document.querySelectorAll( 'form > input[name^="chk"]' );
しかし、尚且つ checkbox が指定できない？！
document.querySelectorAll( 'form > input[name^="chk" && [type="checkbox"]' );


だがこれで、できた！
document.querySelectorAll( 'form > input[name^="chk"][type="checkbox"]' );


あっぷしてみた！これってスクリプトバージョン指定だったか？（汗）

<!DOCTYPE html>
<title></title>
<body>
<form action="#">
  <p>
    <select name="myselect" onchange="fuga.call( this, event )">
      <option value="1111111111" selected>全てにチェック</option>
      <option value="0000000000">全てチェック解除</option>
      <option value="1010101010">奇数だけチェック</option>
      <option value="0101010101">偶数だけチェック</option>
      <option value="1000010100">1、6、8番だけチェック</option>
      <option value="0001111111">3番以降全てチェック</option>
    </select>
  </p>
  <p id="babu">
    <input type="checkbox" value="1" name="chk01" checked>1番<br>
    <input type="checkbox" value="1" name="chk02" checked>2番<br>
    <input type="checkbox" value="1" name="chk03" checked>3番<br>
    <input type="checkbox" value="1" name="chk04" checked>4番<br>
    <input type="checkbox" value="1" name="chk05" checked>5番<br>
    <input type="checkbox" value="1" name="chk06" checked>6番<br>
    <input type="checkbox" value="1" name="chk07" checked>7番<br>
    <input type="checkbox" value="1" name="chk08" checked>8番<br>
    <input type="checkbox" value="1" name="chk09" checked>9番<br>
    <input type="checkbox" value="1" name="chk10" checked>10番
  </p>
</form>

<script type="text/javascript">

var hoge = function ( es ) {
  return function ( ) {
    var vs = this.value.split( '' );
    
    if( Array.prototype.forEach ) {
      vs.forEach(
        function ( e, i ) {
          if( 'checked' in es[i] ) es[i].checked = !!+e
        });

    } else {
      var i = vs.length;

      while( i-- )
        if( 'checked' in es[i] ) // @_jscript_version >= 5.5
          es[ i ].checked = !!+vs[ i ];
    }
  };
};

var fuga = hoge( document.getElementById( 'babu' ).getElementsByTagName( 'input' ) );

</script>

第２案

<!DOCTYPE html>
<title></title>
<body>
<form action="#">
<select name="myselect" onchange="fuga.call( this, event )">
  <option value="all" selected>全てにチェック</option>
  <option value="none">全てチェック解除</option>
  <option value="odd">奇数だけチェック</option>
  <option value="even">偶数だけチェック</option>
  <option value="1,6,8">1、6、8番だけチェック</option>
  <option value="n+4">3番以降全てチェック</option>
</select>
<br>
<input type="checkbox" value="1" name="chk01" checked>1番<br>
<input type="checkbox" value="1" name="chk02" checked>2番<br>
<input type="checkbox" value="1" name="chk03" checked>3番<br>
<input type="checkbox" value="1" name="chk04" checked>4番<br>
<input type="checkbox" value="1" name="chk05" checked>5番<br>
<input type="checkbox" value="1" name="chk06" checked>6番<br>
<input type="checkbox" value="1" name="chk07" checked>7番<br>
<input type="checkbox" value="1" name="chk08" checked>8番<br>
<input type="checkbox" value="1" name="chk09" checked>9番<br>
<input type="checkbox" value="1" name="chk10" checked>10番
</form>

<script type="text/javascript">

var hoge = function ( selector ) {
  var loop = function ( ary, cb ) {
    Array.prototype.forEach.call( ary, cb )
  };
  var on = function (e) { e.checked = true };
  var off = function (e) { e.checked = false };
  
  return function ( ) {
    var targets = selector;
    var member = [ ];
    var es;
    
    loop( document.querySelectorAll( selector + '[checked]' ), off );
    
    if( /^[0-9, \s]+$/g.test( this.value ) && ( member = this.value.split(/[\s,]/g) ) ) {
      es = document.querySelectorAll( selector );
      loop( member.map( function (n) { return es[ n - 1 ] } ), on );

    } else {
      switch( this.value ) {
        case 'all'   : break;
        case 'none'  : targets = null; break;
        default      : targets += ':nth-of-type(' + this.value + ')';
      }
      targets && loop( document.querySelectorAll( targets ), on );
    }
  };
};

var fuga = hoge( 'form > input[name^="chk"][type="checkbox"]' );

</script>

昨日はさっぱり意味がわかりませんでした。

<script type="application/javascript;version=1.8">

var hoge =
  (function ( toUpper, toLower )
     function( ary, flag )
       ary.map( flag ? toUpper: toLower ))(
         (function ( up )
           function( a )
             a.replace( /-([a-z])/g, up ))(
               function ( a, b )
                 b.toUpperCase()),
         (function ( low )
           function ( a )
             a.replace(/[A-Z]/g, low ))(
               function ( a )
                 '-' + a.toLowerCase()));

alert( [hoge( [ 'aB', 'bC' ], false ), hoge( [ 'a-b', 'b-c' ], true ) ] );

</script>