- 締切済み
特定の文字列が入っているcheckboxのみオン
初めて投稿いたします。 javascriptのcheckbox機能について質問させていただきます。 下記の機能を持ったjavascriptのブックマークレットを探しています。 １．の機能を持ったスクリプトを最優先とし、可能であれば、２．の機能も複合した形での スクリプトであると大変ありがたいです。 １．特定の文字列が記載されているチェックボックスだけをオンにする （□をチェックボックスとします） □a □b □c □d □aa □ab □ac □ad □aa □ab □ac □ad というようなチェックボックス郡があったときに、"a"と"ac"と"ad"の文字列が記載されているチェックボックスのみ チェックを入れるスクリプトです。なお、チェックボックスの数や記載内容は毎回異なります。 たとえば"ac"が記載されているチェックボックスが存在しないこともあり、その場合は"a"と"ad"が 記載されているチェックボックスのみチェックが入るようにしたいです。 チェックされる文字列の記載内容や種類（上記例の場合は"a","ac","ad"の3種類）が簡単に書き換え可能な スクリプトであれば尚良いです。 ２．チェック可能な数量を限定する １．で記載したチェック対象の文字列（"a","ac","ad"）が記載されているチェックボックスにチェックが入る際、 "a"が記載されたチェックボックスは最大で3個まで、 "ac"が記載されたチェックボックスは最大で5個まで、 "ad"が記載されたチェックボックスは最大で10個までしかチェックされないようにしたいです。 その際、チェックされるチェックボックスの選択方法に指定はありません。 たとえば"a"が記載されているチェックボックスにチェックが入る際、前から3個、後ろから3個、ランダムで3個 いずれのパターンであっても構いません。 こちらについても、最大数量を簡単に書き換え可能なスクリプトであると尚良いです。 拙い文章かと思いますが、ご回答いただける方をお待ちしております。
- suteteko330
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
alert(encodeURIComponent('ターゲットの文字')); これで出てきた文字を、 {text:'%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%81%AE%E6%96%87%E5%AD%97',max:2} みたいにする。 文字コードは utf-8 にする。 すこしは、調べてから…＞俺
- babu_baboo
- ベストアンサー率51% (268/525)
<a href="javascript:(function%20(){Array.prototype.forEach.call(arguments,function(a){this.filter(function(a){return a[1]==this.text},a).forEach(function(a,i){a[0].checked=i<this.max},a)},Array.prototype.map.call(document.querySelectorAll('input[type=checkbox]'),function(c){return[c,c.nextSibling.nodeValue.replace(/^\s+|\s+$/g,'')]}))})({text:'a',max:5},{text:'ab',max:3},{text:'ad',max:2})">go</a> 空白を無くし、無くせない空白は%20 にするだけじゃね？
- babu_baboo
- ベストアンサー率51% (268/525)
１ぎょうで かけると おもったのに てすとようのHTMLが・・・ Array.map |.forEach |.filter, querySelectorAll がつかえるならOK? <!DOCTYPE html> <title>checkbox</title> <body> <form> <p> <input type="checkbox" name="a" value="1">a <input type="checkbox" name="a" value="2">b <input type="checkbox" name="a" value="3">c <input type="checkbox" name="a" value="3">d </p> <p> <input type="checkbox" name="ab" value="1">a <input type="checkbox" name="ab" value="2">b <input type="checkbox" name="ab" value="3">c <input type="checkbox" name="ab" value="3">d </p> <p> <input type="checkbox" name="abc" value="1">a <input type="checkbox" name="abc" value="2">a <input type="checkbox" name="abc" value="3">a <input type="checkbox" name="abc" value="3">a </p> <p> <input type="checkbox" name="abcd" value="1">aa <input type="checkbox" name="abcd" value="2">ab <input type="checkbox" name="abcd" value="3">ac <input type="checkbox" name="abcd" value="3">ad </p> <p> <input type="checkbox" name="abcde" value="1">aa <input type="checkbox" name="abcde" value="2">ab <input type="checkbox" name="abcde" value="3">ac <input type="checkbox" name="abcde" value="3">ad </p> <p> <input type="checkbox" name="abcdef" value="1">aa <input type="checkbox" name="abcdef" value="2">ab <input type="checkbox" name="abcdef" value="3">ac <input type="checkbox" name="abcdef" value="3">ad </p> <input type="button" value="test" onclick="hoge ({text:'a', max:5}, {text:'ab', max:'3'}, {text:'ad', max:'2'});"> </form> <script> function hoge () { Array.prototype.forEach.call (arguments, function (arg) { this.filter (function (ary) { return ary[1] == this.text }, arg) .forEach (function (ary, i) { ary[0].checked = i < this.max }, arg); }, Array.prototype.map.call (document.querySelectorAll ('input[type=checkbox]'), function (chk) { return [chk, chk.nextSibling.nodeValue.replace (/^\s+|\s+$/g, '')]})); } </script>
お礼
babu_baboo様 ご回答いただきありがとうございます。 ご回答内容を拝見して、こちらの説明が余りに不十分であったと反省しております。 再度状況を下記に記載いたします。 ＜背景・目的＞ チェックボックス付きのウェブページはあらかじめ存在しており、 私が質問に１．記載したようなチェックボックス群が既に備わっています。 こちらが求められる動作は、そのウェブページ内の特定の文字列を含むチェックボックスのみ チェックを入れるだけです。その動作を行うことができるブックマークレットを探しております。 ＜現状＞ 似たようなブックマークレットとして、ページ内の全てのチェックボックスにチェックを 入れることができるものがあります。 （ご参照 http://www.programming-magic.com/20080122235436/ ） 全てにチェックを入れるブックマークレットは上記ページの他、至る所で紹介されているのですが、 特定の文字列が記載されているものだけを選択できるブックマークレットを見つけることはできませんでした。 ＜希望するブックマークレット＞ ・ 特定の文字列が記載されているチェックボックスのみまとめてチェックを入れることが可能 ・ 対象となる特定文字列はスクリプト上で簡単に編集できることが望ましい （今回は”a”,”ac”,”ad”が記載されているチェックボックスをONにしたいが、 次回は”b”,”aa”だけをONにしたい、といった場合にスクリプト編集が容易であると良いです） ・ 特定の文字列ごとにチェックされる数に制限を設けたい【上記2つの希望内容より優先度は低いです】 （"a"が記載されたチェックボックスは最大で3個、"ac"が記載されたチェックボックスは最大で5個まで、 "ad"が記載されたチェックボックスは最大で10個までといった感じです。 この制限数もスクリプト上での編集が容易であることが望ましいです） 上記の内容をまとめて実現可能なブックマークレットを求めております。 引き続きご回答いただける方をお待ちしております。
お礼
早速のご回答ありがとうございます。 最初のご回答で記載されているテスト用のHTMLでは、ちゃんと動作することが確認できました。 しかし、私がスクリプトを使用したいウェブページでは動作しませんでした。 スクリプトを使用したいウェブページでは、チェックボックスに記載されている文字が日本語であるため、 babu_baboo様が記載してくださったスクリプトの最後のa,ab,adを対象の日本語に書き換えています。 今回動作しなかった原因として下記を挙げてみました。該当しそうな原因がありそうでしょうか。 １．対象文字が日本語であること ２．対象文字に【】のような特殊文字が使われていること ３．スクリプトを使用したいウェブページのチェックボックス群のname属性が、0からの連番になっていること（value属性は全チェックボックスで同じ値が使用されていました） たびたびのご相談で申し訳ございません。 ご回答いただければと思います。